CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
nalzok
nalzok

Reputation: 16117

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).

Upvotes: 6

Views: 523

Answers (4)

William Hou
William Hou

Reputation: 1771

I had the same problem. It turned out that I made the p element to {display: inline;}:

     p {
         font-size: 22px;
         line-height: 1.5;
         margin-bottom: 15px;              
         display: inline;  // this is the problem.
     }

But I forgot that.

So later when I was trying the following pseudo class:

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

No matter what I did, the pseudo class just didn't work.

Then I thought I might have done something to the p element.

I went back and checked, and I found I made the p element to {display: inline;}. I deleted display: inline;, and then the pseudo class started to work.

Upvotes: 0

Angel Politis
Angel Politis

Reputation: 11313

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:

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 26th 2017.

Upvotes: 5

charith.arumapperuma
charith.arumapperuma

Reputation: 704

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

Upvotes: 3

Jack Guy
Jack Guy

Reputation: 8523

You can see the properties that are excluded from use with ::first-line here. Among them are

.element::first-line {
    font-style: ...
    font-variant: ...
    font-weight: ...
    font-size: ...
    font-family: ...

    line-height: ...
    color: ...
    word-spacing: ...
    letter-spacing: ...
    text-decoration: ...
    **text-transform: ...**

    background-color: ...
    background-image: ...
    background-position: ...
    background-repeat: ...
    background-size: ...
    background-attachment: ...
}

Upvotes: 1

Related Questions