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
Creating Attractive First Lines with CSS ::first-line
The CSS ::first-line pseudo-element allows you to apply styles specifically to the first line of text within an element. This is particularly useful for creating attractive typography effects like drop caps or highlighted opening lines.
Syntax
selector::first-line {
property: value;
}
Example 1: Bold and Colored First Line
The following example makes the first line of each paragraph bold and colored −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: darkorchid;
color: white;
font-family: Arial, sans-serif;
padding: 20px;
}
p::first-line {
font-size: 1.5em;
color: gold;
font-weight: bold;
text-shadow: 2px 2px 4px black;
}
</style>
</head>
<body>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum a erat vitae interdum.</p>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</body>
</html>
The first line of each paragraph appears larger, golden colored, bold, and with a text shadow, while the rest of the text remains white on the dark purple background.
Example 2: Box Shadow Effect on First Line
This example applies a box shadow effect to the first line of text −
<!DOCTYPE html>
<html>
<head>
<style>
article {
text-align: center;
padding: 20px;
font-family: Georgia, serif;
line-height: 1.6;
}
::first-line {
background-color: #f0f0f0;
padding: 5px;
border-radius: 5px;
box-shadow: inset 0 0 10px orchid;
}
</style>
</head>
<body>
<article>
<h2>Creating Beautiful Typography</h2>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html>
The first line of text in each element has a light gray background with an inset orchid-colored shadow, creating a highlighted effect that makes the opening lines stand out.
Key Properties
The ::first-line pseudo-element supports only certain CSS properties −
- Font properties (font-size, font-weight, font-family, etc.)
- Color and background properties
- Text decoration properties
- Text shadow and letter-spacing
Conclusion
The ::first-line pseudo-element is perfect for creating elegant typography effects by styling just the first line of text. Use it to draw attention to opening sentences and create professional-looking document layouts.
Updated on: 2026-03-15T15:30:44+05:30
231 Views
Advertisements