Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by mk37
mk37
10,271 Points

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
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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.

mk37
mk37
10,271 Points

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