:first-letter text-decoration browser support

Question

I'm having an issue where the text-decoration attribute isn't working with the first-letter specification.

In this example the purpose of the code is to style the first letter of each <div class="content"> block.

div.content:first-letter {
    text-decoration: underline;
    color: #bd00df;
}

The first letter of each <div class="content">block does turn purple, but it doesn't get underlined. How do I get it to underline in a simple and productive way?

Answer 1

This is a bug present in Chrome from version 36+. The text-decoration does not render when set with :first-letter.

Chrome has an interesting history of rendering differences for text-decoration: underline when compared to other browsers.

These examples have the first letter set at font-size: 10em;. I have obtained the screenshots with crossbrowsertesting.com.

You can view the full results on Chrome for OSX here and Windows 7 here

You can view the jsfiddle here.

Firefox is consistent

For comparison, Firefox has these consistent results, tested from Version 7:

Internet Explorer

Even IE is more consistent.

IE 6 - 7                                             IE8+

        

Chrome is different

These are taken from Chrome running on Mac OS 10.9 and Windows 7 64bit

Chrome Version 19 - Version 31

Single pixel underline

Chrome Version 32 - Version 33

The underline is enlarged

Chrome Version 34 - Version 35

Windows 7 64bit                                 Mac OSX

Chrome Version 36+

Bug, no underline when set with :first-letter.