::first-line

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 eitherblock, 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

<h2>::first-line vs. tag selector</h2>
  <p>This paragraph color is set to <code>#444</code> with <code>p { color: #444; }</code>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  

<h2>::first-line vs class selector</h2>
<p class="p2">This paragraph color is set to <code>#444</code> with <code>.p2 { color: #444; }</code>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  

<h2>::first-line vs ID selector</h2>
<p id="p3">This paragraph color is set to <code>#444</code> with <code>#p3 { color: #444; }</code>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  

<h2>::first-line vs !important</h2>
<p id="p4">This paragraph color is set to <code>#444</code> with <code>#p4 { color: #444 !important; }</code>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</article>

article {
  padding: 20px;
}

p {
  color: #444;
}

p:first-line {
  color: deepskyblue;
}

.p2 {
  color: #444;
}

.p2:first-line {
  color: tomato;
}

#p3 {
  color: #444;
}

#p3:first-line {
  color: firebrick;
}

#p4 {
  color: #444 !important;
}

#p4:first-line {
  color: hotpink;
}

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.

Browser Support

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