CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::first-line and ::first-letter

strange how ::first-line messes with chrome

    <p>Styles will only be applied to the first line of this paragraph.
    After that, all text will be styled like normal. See what I mean?</p>

    <span>The first line of this text will not receive special styling
    because it is not a block-level element.</span>
        ::first-line {
          color: blue;
          text-transform: uppercase;

          /* WARNING: DO NOT USE THESE */
          /* Many properties are invalid in ::first-line pseudo-elements */
          margin-left: 20px;
          text-indent: 20px;

Its from MDN example. What i found strange when using chrome browser specifically the <p> first line are jumble on top of each other. When i check with other browsers there is no issues, I got the latests update for chrome, tried both inline and external stylesheet . so i am guessing either its my laptop (which to me would be bizare but its possible) or a bug in chrome. just curious is anyone else seeing the same issue?

1 Answer

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 87,022 Points

Try applying a reset stylesheet in your project and see if that has any effect. The ::first-line selector is over 95% supported but it isn't perfect.

I just tested the code in my browser but I used the selector p::first-line so it only selects first line of paragraph elements. It seems to cut off at the wrong place on the right side of the browser but not on top of each other.

hey jonathan. yes i tried your reset idea but still no avail . its no big deal to me but i was really curious why it did that. thanks