The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a stylistic choice. The amount of text targeted by this pseudo-element depends on the several factors like line length, viewport width, font-size, letter-spacing, word-spacing. As soon as the line breaks, the text after that is no longer selected. Note that there is no actual DOM element being selected here (thus "pseudo" element).

This pseudo-element only works on block-level elements (when display is set to either block, inline-block, table-caption, table-cell). If set on an inline element, nothing happens, even if that inline element has a line break within it.

Also note that not all properties can be used in a ruleset containing ::first-line. Mostly:

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

The official CSS specification tells User Agents can allow other properties if they feel like it:

UAs may apply other properties as well.

A word regarding specificity

The following demo shows how ::first-line is able to override any kind of specificity, even !important.

  • The 1st parapgraph is set to grey through a tag selector
  • The 2nd parapgraph is set to grey through a class selector
  • The 3rd parapgraph is set to grey through an ID selector
  • The 4th parapgraph is set to grey through a !important bash
Check out this Pen!

This is because the pseudo-element is treated like a child element, not just a part of the parent element. So the rules you apply to it are just for it, the parent rules just may cascade to it.

Also, try resizing your browser to see how behave the pseudo-element when the viewport width change.

Related Properties

There is no :last-line or :nth-line, even though that would be cool.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yep Yep Yep 3.5+ (old)
5.5+ (old)
Yep Yep

Since ::first-line is a pseudo-element, it should be prefixed by two colons as specified in CSS2.1. However some browsers only support the single-colon syntax (Internet Explorer 5.5 - 9 and Opera 3.5 - 9).


  1. User Avatar
    Permalink to comment#

    There’s a really annoying bug in Chrome that prevents text-transform: uppercase from working on ::first-line:


    Might want to add that to the article because it’s a very old bug (known since Chrome 3 or earlier) and nobody on the Chrome team seems to be following up on it.

    • User Avatar
      Permalink to comment#

      That is unbelievable. How long has this bug been known, and there is absolutely no attempt to remedy it?

    • User Avatar
      Permalink to comment#

      So I know it’s not ideal, but until they fix this bug I’ve found this to be a helpful work around:

      font-variant: small-caps;

      Like I said, not ideal, but it’s been enough for some projects I’ve worked on.

  2. User Avatar
    Permalink to comment#

    Nobody @GoogleChrome seems to care about it. :-) You can use span or something to achieve the desired effect still.

    • User Avatar
      Jacob Christensen
      Permalink to comment#

      not really. because the ::first-line is independent of html markup, and therefore suits a fluid layout much better than span tags which assumes that this word right here is definitely the last word on this line of text.

  3. User Avatar
    Tony Brasunas
    Permalink to comment#

    Yes, this bug in Chrome / WebKit is awful and persistent and inexplicable. Never thought I’d say it, but Chrome really needs to catch up to IE here.

  4. User Avatar
    NetOperator Wibby
    Permalink to comment#

    2016 is almost over and this Chrome bug still exists. Chromium is the new IE.

  5. User Avatar
    Permalink to comment#

    Worth noting, I just learned Firefox (v41.0.1 at the time of this writing) will not allow :first-line to set line-height to lower than the element’s current setting.

    Apparently not necessarily a bug as the spec leaves this up to interpretation by the browser but all others (Chrome, Safari, IE) perform as expected.

  6. User Avatar
    David Yeiser
    Permalink to comment#

    Here’s another ::first-line bug I encountered (with fix):

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.