CSS pseudo-element first-letter using form label element

Today I spent 1/2 hour trying to understand, why my labels do not respect CSS rule first-letter. Here is an example snippet:
#myform label:first-letter {text-decoration:underline}

<form id="myform" action="/test/" method="post">
<label title="From">From:</label>

The problem was, that The ‘first-letter’ pseudo-element can only be attached to a block-level element.

Reference: w3 – 2.4 The ‘first-letter’ pseudo-element

Also, space is mandatory after ‘first-letter’ in CSS, so that this rule are displayed correctly in older browsers, such as Internet Explorer 6.

Leave a Reply

Your email address will not be published.