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
Selected Reading
The ::first-line Pseudo-element in CSS
The first-line Pseudo Element selects the first line of the content of an element or a container. It is denoted by double colon i.e. −
::first-line
Let?s see some examples of CSS ::first-line pseudo element −
Style the first line
In this example, we will style the first line using the pseudo element −
<style>
p::first-line {
background-color: lightgreen;
color: white;
}
</style>
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<div id="divDisplay"></div>
</body>
</html>
The ::first-line combined with HTML classes
Let?s see another example of CSS ::first-line pseudo element combined with a class. Here, the <p> with the demo class is styled. This style is for the first line −
p.demo::first-line {
background-color: #FF8A00;
color: white;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo::first-line {
background-color: #FF8A00;
color: white;
}
div{
width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p class="demo">This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html>
Updated on: 2023-12-28T15:20:14+05:30
110 Views
Advertisements