Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
The ::first-line Pseudo-element in CSS
The ::first-line pseudo-element in CSS selects and styles the first line of text within an element. It is denoted by double colons and allows you to apply specific formatting to just the first line of a block-level element's content.
Syntax
selector::first-line {
property: value;
}
Allowed Properties
The ::first-line pseudo-element only accepts certain CSS properties −
| Property Type | Examples |
|---|---|
| Font properties |
font-family, font-size, font-weight
|
| Color properties |
color, background-color
|
| Text properties |
text-decoration, text-transform, line-height
|
| Border properties |
border, border-radius
|
Example: Basic First Line Styling
The following example applies background color and text color to the first line of a paragraph −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
font-weight: bold;
}
p {
width: 300px;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h2>First Line Styling Demo</h2>
<p>This is the first line of the paragraph that will be styled with green background and white text. This is the second line and subsequent lines that will have normal styling.</p>
</body>
</html>
A paragraph appears where only the first line has a green background, white text, and bold font weight. The remaining lines display with normal styling.
Example: First Line with Class Selector
This example combines the ::first-line pseudo-element with a class selector to target specific elements −
<!DOCTYPE html>
<html>
<head>
<style>
p.highlight::first-line {
background-color: #FF8A00;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
p {
width: 350px;
font-size: 16px;
line-height: 1.6;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Class-Specific First Line Styling</h2>
<p>This paragraph does not have the highlight class, so its first line appears normal with default styling.</p>
<p class="highlight">This paragraph has the highlight class applied. Notice how only the first line is styled with orange background, white text, uppercase letters, and increased letter spacing.</p>
</body>
</html>
Two paragraphs appear. The first paragraph displays normally. The second paragraph's first line is styled with orange background, white uppercase text, and increased letter spacing, while the rest of the text remains normal.
Key Points
- The
::first-linepseudo-element only works with block-level elements - It dynamically updates as the viewport size changes and text reflows
- Only certain CSS properties can be applied to
::first-line - The first line is determined by the element's width and font size
Conclusion
The ::first-line pseudo-element is a powerful tool for creating elegant typography effects by styling just the first line of text. It's particularly useful for creating magazine-style layouts and emphasizing opening lines in articles.
Updated on: 2026-03-15T13:56:58+05:30
119 Views
Advertisements