sun qingyao sun qingyao - 4 months ago 15
CSS Question

first-line pseudo element not working for p element



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

Your pseudo-element works just fine and it 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:

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.