CSS first-letter problem with display:inline

According to w3.org first-letter pseudo class works only with block level elements. Here is a paragraph from w3:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

Code with label that works across all browsers:
label{display:block}
label:first-letter {text-decoration:underline}

Note, that there should be a space character between first-letter and curly bracket. Otherwise it will not work in IE6. So if you want to punish IE (or your users), use:
label:first-letter{text-decoration:underline}

One reply on “CSS first-letter problem with display:inline”

  1. Well this was a nice hint!
    Been struggling for hours on this problem, didn’t notice it worked on block elements only!
    Thanks for sharing, you saved me an hour :)

Comments are closed.