Yogesh Chauhan's Blog

List of all Pseudo Elements in CSS

in CSS on August 9, 2019

What are Pseudo Elements?

Pseudo Elements are used to style a part of an element for example, first line, first letter etc.

There are 5 different types of Pseudo Elements. I’ll discuss one by one with a demo example. Let’s take a look at the syntax first.


  selector::pseudo-element {
    property:value;
  }

Pseudo-element 1. ::first-line

As the name suggests, it adds style to the first line of the text. So if the paragraph is consisted of more than one line, the style will be applied to the first line. For example,


  /* CSS */
  p::first-line { 
    background-color: yellow;
  }

  /* HTML */

My name is Donald. No, I am not Trump! I live in USA. Again, I am not Trump

In the demo (link is at the bottom of the article), notice that the first line of the both paragraph are in yellow background but the second ones are in normal background.

Pseudo-element 2. ::first-letter

As the name suggests, it adds style to the first letter of the text. So the style will be applied to the first letter of the paragraph only. For example,


  /* CSS */
  p::first-letter {
    font-size: 200%;
    color: #8A2BE2;
  }

As you can see in the demo (link is at the bottom of the article), the first letter of both of the paragraphs have different styles then the whole paragraph itself.

Pseudo-element 3. ::before

As the name suggests, it adds style and content before any element. For example,


  /* CSS */
  p::before {
    content: "Read this -";
  }

As you can see in the demo (link is at the bottom of the article), the content – “Read this -” is applied to both of the paragraphs before they start.

Pseudo-element 4. ::after

As the name suggests, it adds style and content after any element. For example,


  /* CSS */
  p::after { 
    content: " - Remember this";
  }

As you can see in the demo (link is at the bottom of the article), both of the paragraphs ends with ” – Remember this” sentence.

Pseudo-element 5. ::selection

As the name suggests, it adds style to the portion of an element selected by an user. For example,


  /* CSS */
  ::selection {
    color: blue;
    background: lightcyan;
  }
  ::-moz-selection { /* Code for Firefox */
    color: blue;
    background: lightcyan;
  }

Try to select any word or letter or even the whole paragraph in the demo below. You’ll see the new style for the selected elements.

That’s it for Pseudo Elements and please read about Pseudo class in my next article.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
WordPress 5.7 is migrating to latest jQuery version and people are freaking outjQuerySELF JOIN in PostgresPostgresHow to get Current Hour, Minute and Second in JavaScript?JavaScriptThe Sort and Compare Functions in JavaScriptJavaScriptHow to create HTML elements with ID and class using JavaScript?HTMLA complete diagram with building blocks of an Angular applicationAngular