The ::first-line pseudo-element applies styles to the first line of a block-level element. The length of the first line depends on various factors, such as the width of the element, the font size, and the browser window's width, making it a dynamic selector.
Example 1: Basic First-Line Styling
/* CSS */
p::first-line {
color: #0275d8; /* Changes the text color of the first line */
font-weight: bold; /* Makes the first line bold */
letter-spacing: 0.5px; /* Adds a little space between letters */
}
Explanation This CSS targets the first line of every paragraph (<p>) element. It makes the entire first line bold, changes its color, and increases the letter spacing for emphasis.
Example 2: Uppercase Transformation
/* CSS */
article > p::first-line {
text-transform: uppercase; /* Transforms the first line to all caps */
font-size: 1.1em; /* Slightly increases the font size */
}
Explanation This code selects the first line of any paragraph that is a direct child of an <article> element. It transforms the text to uppercase, a common technique used in magazine and newspaper layouts.
Example 3: Using a Different Font Style
/* CSS */
.lead-paragraph::first-line {
font-style: italic; /* Italicizes the first line */
color: #5e5e5e; /* Sets a muted grey color */
}
Explanation Here, we target an element with the class .lead-paragraph. This style makes the first line italic, which is useful for introductory paragraphs or standfirsts to distinguish them from the rest of the body text.
Example 4: Changing Word Spacing
/* CSS */
blockquote::first-line {
word-spacing: 4px; /* Increases the space between words */
color: #666;
}
Explanation This CSS increases the space between words on the first line of a <blockquote>. This can be used to create a more open and airy feel for pull quotes or other highlighted text.
Example 5: Combining with ::first-letter
/* CSS */
.story p::first-line {
color: #373a3c;
font-weight: 600; /* A semi-bold font weight */
}
.story p::first-letter {
color: #d9534f;
font-size: 3em;
float: left;
line-height: 1;
margin-right: 0.1em;
}
Explanation This example shows how ::first-line and ::first-letter can be used together. The ::first-letter style will override the ::first-line style for the first letter, allowing for complex, layered typographic effects.
Example 6: Different Background Color
/* CSS */
.highlight::first-line {
background-color: #ffeb3b; /* A light yellow highlight color */
padding: 2px 0; /* Adds a little vertical padding */
}
Explanation This style applies a background color to the first line of any element with the .highlight class. It's a simple way to draw attention to the beginning of a section, similar to using a highlighter marker.
Example 7: Using Text Decoration
/* CSS */
p.menu-description::first-line {
text-decoration: underline; /* Underlines the first line */
text-decoration-color: #f0ad4e; /* Sets the underline color */
text-decoration-thickness: 2px; /* Makes the underline thicker */
}
Explanation This code targets the first line of paragraphs with the class .menu-description. It adds a thick, colored underline, which can be effective for headings or descriptions in a list or menu.