{"id":14190,"date":"2011-09-06T20:03:23","date_gmt":"2011-09-07T03:03:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14190"},"modified":"2021-08-04T10:47:33","modified_gmt":"2021-08-04T17:47:33","slug":"first-line","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","title":{"rendered":"::first-line"},"content":{"rendered":"\n

The ::first-line<\/code> 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<\/code> 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).<\/p>\n\n\n\n

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

Also note that not all properties can be used in a ruleset containing ::first-line<\/code>. Mostly:<\/p>\n\n\n\n

.element::first-line {\n    font-style: ...\n    font-variant: ...\n    font-weight: ...\n    font-size: ...\n    font-family: ...\n\n    line-height: ...\n    color: ...\n    word-spacing: ...\n    letter-spacing: ...\n    text-decoration: ...\n    text-transform: ...\n\n    background-color: ...\n    background-image: ...\n    background-position: ...\n    background-repeat: ...\n    background-size: ...\n    background-attachment: ...\n}<\/code><\/pre>\n\n\n\n
The official CSS specification<\/a> tells User Agents can allow other properties if they feel like it:<\/p>\n\n\n\n
UAs may apply other properties as well.<\/p><\/blockquote>\n\n\n
A word regarding specificity<\/h3>\n\n\n
The following demo shows how ::first-line<\/code> is able to override any kind of specificity, even !important<\/code>.<\/p>\n\n\n\n
  • The 1st parapgraph is set to grey through a tag selector<\/li>
  • The 2nd parapgraph is set to grey through a class selector<\/li>
  • The 3rd parapgraph is set to grey through an ID selector<\/li>
  • The 4th parapgraph is set to grey through a !important bash<\/li><\/ul>\n\n\n\n