first-line pseudo element not working for p element

Question

p::first-line {
  text-transform: uppercase;
}
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

As you can see, the first line hasn't been converted to uppercase. What am I doing wrong?

I'm using OS X 10.11.6, and Safari 9.1.2 (11601.7.7).

Answer 1

Your pseudo-element works just fine. The issue you are facing is a known, 10+ year-old, unsolved bug in the Webkit Engine regarding ::first-line not accepting text-transform.

This particular bug has been reported multiple times, but it seems like there is no solution whatsoever. Check out three of the reports I found:

• https://bugs.chromium.org/p/chromium/issues/detail?id=142827

• https://bugs.chromium.org/p/chromium/issues/detail?id=129669

• https://bugs.webkit.org/show_bug.cgi?id=3409

p::first-line {
  color: red;
}
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

---

For the record, the properties ::first-line accepts are:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

You can find more about ::first-line in this page.

---

Note: Bug 129669 on Chromium has been fixed since September 26^th 2017.

Answer 2

Apparently ::first-line and text-transform combination does not work in webkit browsers. In Firefox, your code works fine. Check this bug.