The CSS ::before and CSS ::after Pseudo-element are used to insert some content before and after the element respectively.

The ::after pseudo element

If you want to insert a content after an element, then use the ::after pseudo-element. The content to be placed after is set using the content attribute ?

p::after { 
   content: " is Virat Kohli";
   background-color: red;
   font-weight: bold;
}

Example

Let us see the example ?

   


   
Cricket is love
   
Favourite Cricketer
   
Favourite Batsman

The ::before pseudo element

If you want to insert a content before an element, then use the ::before pseudo-element. The content to be placed after is set using the content attribute ?

p::before { 
   content: "Virat Kohli:";
   background-color: red;
   font-weight: bold;
}

Example

Let us see the example ?

   


   
Cricket is love
   
Favourite Cricketer
   
Favourite Batsman

Example

Let?s see an example for CSS ::before and CSS ::after Pseudo-elements ?

   


   

      
Nobody: 
      
Sheldon Cooper:
   

   

      
Death Eaters arrive
      
Expecto Patronum!
   

Example

Let?s see another example for CSS ::before and CSS ::after Pseudo-elements ?

   
   


   

      

         

      
      
Be Centered & Balanced