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
/* Write CSS Here */
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:
Similar Reads
Explain the concept of specificity in CSS Prerequisites: CSS syntax and selectors , HTML basics Specificity is an advanced algorithm used by HTML browsers to define the CSS declaration which will be the most appropriate to an HTML element. It basically calculates the weights of all the CSS selectors to determine the proper rule. The main go
3 min read
Explain the term “pseudo-class†in CSS3 Cascading Style Sheets referred to as CSS is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable.The way elements should be rendered on screen is described by CSS. CSS
4 min read
How to use :before or :after pseudo-element to an input field in CSS ? Input tag (<input>) in HTML is used to take input from the user like text input, button input, file input, etc. In CSS, pseudo-elements are basically specific keywords that are added to a selector to style a specific part of the selected element. For example: ::before, ::after etc. The pseudo-
3 min read
CSS Pseudo Elements A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or :
4 min read
Use of :even and :odd pseudo-classes with list items in CSS The:nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content. odd: The us
2 min read
CSS pseudo elements every CSS developer should know CSS pseudo-elements are used to add special effects/styles to a specific part of the selected elements. A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to its id, class, type, attribute etc. For example, the ::before and ::after pseudo-el
5 min read