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
Usage of CSS :first-line pseudo-element
The CSS :first-line pseudo-element is used to add special styles to the first line of text within a block-level element. This pseudo-element automatically adjusts based on the viewport width and text wrapping.
Syntax
selector:first-line {
property: value;
}
Example: Basic First-Line Styling
The following example demonstrates how to use the :first-line pseudo-element to style the first line of paragraphs −
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line {
text-decoration: underline;
font-weight: bold;
color: #2c3e50;
}
p.noline:first-line {
text-decoration: none;
font-weight: normal;
color: inherit;
}
</style>
</head>
<body>
<p class="noline">This line would not have any underline because this belongs to the noline class. The styling is overridden by the more specific class selector.</p>
<p>The first line of this paragraph will be underlined, bold, and colored as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use the :first-line pseudo-element to give special effects to the first line of any HTML element.</p>
</body>
</html>
The first paragraph appears with normal formatting. The second paragraph has its first line underlined, bold, and colored in dark blue, while the remaining lines appear in normal formatting.
Applicable Properties
The :first-line pseudo-element can only be used with 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, letter-spacing
|
| Other |
line-height, vertical-align
|
Conclusion
The :first-line pseudo-element provides an elegant way to highlight the first line of text content. It automatically adapts to different screen sizes and text wrapping, making it perfect for creating typographic emphasis in articles and documents.
Updated on: 2026-03-15T11:28:06+05:30
93 Views
Advertisements