Explain the concept of pseudo-elements in CSS
Last Updated :
26 Sep, 2021
CSS pseudo-elements are used to style specified parts of an element and are used to add special effects to some selectors. To do this, we do not need any script like javascript to add the effects.
Syntax:
selector::pseudo-element {
property: value;
}
Note: The double-colon replaced the single-colon notation for pseudo-elements in CSS3. Single colon can also be used in CSS1 and CSS2.
Applications:
- To add special styles to the first line of the text in a selector.
- To add special style to the first letter of the text in a selector.
- To insert some content before an element.
- To insert some content after an element.
- To matches the portion of an element that is selected by a user.
- Multiple pseudo elements can also be combined.
Now we will see how to use the above effects on the sample text inside p tag.
Example: In this example, we will use the following HTML code for demonstrating the CSS effects.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>
Geeks for geeks is a computer science
portal for geeks and computer enthusiast.
Geeks for geeks provide a variety of
services for you to learn, thrive and
also have fun! Free Tutorials, Millions
of Articles, Live, Online and Classroom
Courses ,Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.
</p>
</body>
</html>
|
Output:
Now we will apply CSS to the above HTML code.
1. selector:: first-line: First-line pseudo element add special styles to the first line of the text in a selector. We can add variety of styles to first line using this. Here we see example:
main.css
p::first-line{
color: blue;
font-size: 2rem;
}
|
Output:
2. selector::first-letter: First-letter pseudo element add special styles to the first letter of the text in a selector. We can add variety of styles to first letter using this.
main.css
p::first-letter{
color: blue;
font-size: 2rem;
font-family:sans-serrif;
font-weight: bold;
}
|
Output:
3. selector::before: Before pseudo element is used to add the content before the selector. content property is required to add the text.
main.css
p::before {
content: 'I am before paragraph';
color: red;
font-size: 3rem;
font-weight: bold;
}
|
Output:
4. selector::after: After pseudo element is used to add the content after the selector. content property is required to add the text.
main.css
p::after {
content: 'Focus on me';
color: red;
font-size: 3rem;
font-weight: bold;
}
|
Output:
5. selector::selection: This pseudo-element applies the style to elements that are selected. for example, the given highlighted text is being selected and we can see the given effects had been added.
main.css
::selection {
color: red;
background: yellow;
}
|
Output:
6. Adding multiple pseudo elements to a selector: We can also add more than one pseudo-elements to given selector as shown below.
main.css
p::before {
content: 'Before';
color: red;
font-size: 3rem;
font-weight: bold;
}
p::after {
content: 'After';
color: red;
font-size: 3rem;
font-weight: bold;
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...