Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :