::first-line
::first-line styles the first rendered line of a block element. The amount of text it covers adjusts dynamically as the viewport width changes.
CSS
Intermediate
4 min read
::first-line Pseudo-Element
Example
/* Style the first line of article paragraphs */
article p::first-line {
font-variant: small-caps;
letter-spacing: 0.05em;
}
/* Lead paragraph first line */
.lead::first-line {
font-size: 1.125em;
color: #333;
} Pro Tip
::first-line only accepts typography-related properties — layout properties like width and padding have no effect.