CSS pseudo-element
The pseudo-element is a keyword that allows you to style any particular part of an HTML element. With the help of pseudo-elements, you can style any particular line, word, or even first letter of any word. The pseudo-elements start with the double-colon (::).
Syntax of Pseudo-element in CSS
selector:: pseudo-element {
/* CSS property*/
property: value;
}
Note: The difference between the pseudo-element and pseudo-class is that, the pseudo-elements are denoted by double-colon (::) while in the pseudo-classes are denoted by single-colon (:).
CSS Pseudo-elements
Some of the pseudo elements are given below:
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
We will discuss each of them in detail later in this lesson.
CSS ::after pseudo-element
The ::after pseudo-element is used to add some extra content/image after an existing content. The user can add the content with the help of CSS content property and its default display value is inline.
Syntax of ::after pseudo-element in CSS
HTML element/selector::after {
content: "value";
}
Example: Applying ::after pseudo-elements in CSS
In the given example, we have created the two heading by using <h1> and <h2> element. In the first heading, we just inserted the word "heading" at the end of the sentence by using ::after pseudo-element and the CSS content property.
<!DOCTYPE html>
<html>
<head>
<title>CSS pseudo-element</title>
<style>
h1::after {
content: " heading.";
color: red;
}
</style>
</head>
<body>
<h1>This is my first</h1>
<h2>This is my second heading.</h2>
</body>
</html>
Output:
As we can see in the output the text "heading" is inserted at the end of the sentence using ::after pseudo-element and CSS content property.
CSS ::before pseudo-element
The ::before pseudo-element is used to add some extra content/image before existing content. The user can add the content with the help of the CSS content property and its default display value is inline.
Syntax of ::before pseudo-element in CSS
HTML element/selector::before {
/* CSS property */
property: value;
}
Example: Applying ::before pseudo-element in CSS
In the given example, we have created the two headings with the help of <h1> and <h2> elements. In the first heading, we inserted the word "Hello" just before the first heading by using the ::before pseudo-element and CSS content property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-element</title>
<style>
h1::before {
content: "Hello! ";
color: red;
}
</style>
</head>
<body>
<h1>This is my first heading.</h1>
<h2>This is my second heading.</h2>
</body>
</html>
Output:
In the given output the text "Hello" is inserted before the sentence using ::before pseudo-element using CSS property content.
CSS ::first-letter pseudo-element
The ::first-letter pseudo-element is used to style the first letter of a particular word or the first letter of the first word within a sentence. The CSS properties that are set out by using the ::first-letter pseudo-element are applicable only when the sentence or a word does not precede by other content such as images, inline tables, etc.
Syntax of ::first-letter pseudo-element in CSS
HTML element/selector::first-letter {
/* CSS property */
property: value;
}
Example: Applying ::first-letter pseudo-element in CSS
In the given example, we have created the two headings using <h1> and <h2> element. In the first heading, we just change the color of the first letter from black to red by using the ::first-letter pseudo-element and the CSS color property while heading 2 remains unchanged.
<!DOCTYPE html>
<html>
<head>
<title>CSS pseudo-eleemnt</title>
<style>
h1::first-letter {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
Output:
As we can see in the image that the color of the first letter of the heading 1 turned from black to red using the ::first-letter pseudo element.
CSS ::first-line pseudo-element
The ::first-line pseudo-element allows us to style the first line of a paragraph or a single sentence. One thing always keeps in mind while using ::first line pseudo-element is that the length of the line depends on many factors such as font size, the width of the element, and the width of the document.
Syntax of ::first-line pseudo-element in CSS
HTML element/selector::first-line {
/* CSS property*/
property: value;
}
Example: Applying ::first-line pseudo-element in CSS
In the given example, we have created a paragraph using <p> element. In this, we used the ::first-line pseudo-element to style the very first line using the CSS properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS pseudo-element</title>
<style>
p::first-line {
background-color:#edc75c;
font-size: 20px;
}
</style>
</head>
<body>
<p>The ::first-line pseudo-element allows us to style the first line of a paragraph or a single sentence. One thing always keeps in mind while using::first line pseudo-element is that, the length of the line depends on many factors such as font size, the width of the element, and width of the document.</p>
</body>
</html>
Output:
As we can see there is a background color behind the first line. This can be done using the ::first-line pseudo-element and the background color can be specified using the CSS background -color property.
CSS ::selection pseudo-element
The ::selection pseudo-element changes the styling of the web content whenever the user selects the particular area or drags the mouse over it.
Syntax of ::selection pseudo-element in CSS
::selection {
/* CSS property*/
property: value;
}
Example of ::selection pseudo-element in CSS
In the given example, we have created two paragraphs using <p> element. So, whenever the user selects or drags the mouse on any word or whole paragraph then the styling of the selected area gets changed with the help of ::selection pseudo-class and some specified CSS properties.
Conclusion
In this lesson, we have learned about pseudo-elements. Also, we have learned how to add content before and after the existing content using pseudo-elements. The pseudo-elements also facilitate us to style the particular section any word, sentence, paragraph, etc. We can style the first letter of the word, the first word of the sentence, or the first sentence of the paragraph using pseudo-elements.
