A Pseudo Element Selector can be used to apply styles to a block of text in an element. It can also be used to insert a new content to an HTML element.
As the name suggests ::first-line Pseudo Element Selector is used to apply styles to the first line of an HTML element.
<html>
<head>
<style>
div::first-line {
color: red;
}
</style>
</head>
<body>
<div>
This is to demonstrate the pseudo elements, we are going to write a few lines. The paragraph can be long. However, it would demostrate the pseudo elements correctly.
</div>
</body>
</html>
The above example is self explanatory. i.e. The color is applied to the first line.
As the name suggests ::first-letter Pseudo Element Selector is used to apply styles to the first letter of an HTML element.
<html>
<head>
<style>
div::first-letter {
color: red;
}
</style>
</head>
<body>
<div>
This is the first paragraph.
</div>
</body>
</html>
The above example is self explanatory. i.e. The color is applied to the first letter.
We can club Pseudo Elements with HTML classes.
Say for example there are two <div> elements. And you want to apply ::first-letter Pseudo Element Selector to the first <div> element.
Let us see it with the below example.
<html>
<head>
<style>
div.first::first-letter {
color: red;
}
</style>
</head>
<body>
<div class="first">
This is the first paragraph.
</div>
<div class="second">
This is the second paragraph.
</div>
</body>
</html>
So, in the above example, we have created two <div> elements. The first <div> element has a class called first.
<div class="first"> This is the first paragraph. </div>
And the second <div> element has a class called second.
<div class="second"> This is the second paragraph. </div>
And we want to apply the Pseudo Element ::first-letter to the first <div> element.
So, we have defined the class first with the Pseudo Element ::first-letter.
<style>
div.first::first-letter {
color: red;
}
</style>