The ::before and ::after Pseudo-element in CSS


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 −

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         background-color: blue;  
         color: white;
      }
      p::after { 
         content: " is Virat Kohli";
         background-color: red;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h1>Cricket is love</h1>
   <p>Favourite Cricketer</p>
   <p>Favourite Batsman</p>
</body>
</html>

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 −

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         background-color: blue;  
         color: white;
      }
      p::before { 
         content: "Virat Kohli:";
         background-color: red;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h1>Cricket is love</h1>
   <p>Favourite Cricketer</p>
   <p>Favourite Batsman</p>
</body>
</html>

Example

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

<!DOCTYPE html>
<html>
<head>
   <style>
      div:nth-of-type(1) p:nth-child(2)::after {
         content: " BUZZINGA!";
         background: orange;
         padding: 5px;
      }
      div:nth-of-type(2) p:nth-child(2)::before {
         content: "Harry:";
         background-color: lightblue;
         font-weight: bold;
         padding: 5px;
      }
   </style>
</head>
<body>
   <div>
      <p>Nobody: </p>
      <p>Sheldon Cooper:</p>
   </div><hr>
   <div>
      <p><q>Death Eaters arrive</q></p>
      <p><q>Expecto Patronum!</q></p>
   </div>
</body>
</html>

Example

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

<!DOCTYPE html>
<html>
<head>
   <title>Center Alignment using CSS Margin</title>
   <style>
      #yinyangSymbol {
         width: 100px;
         height: 50px;
         background: #fff;
         border-color: #000;
         border-style: solid;
         border-width: 2px 2px 50px 2px;
         border-radius: 100%;
         position: relative;
      }
      #yinyangSymbol::before {
         content: "";
         position: absolute;
         top: 50%;
         left: 0;
         background: #fff;
         border: 18px solid #000;
         border-radius: 100%;
         width: 14px;
         height: 14px;
      }
      #yinyangSymbol::after {
         content: "";
         position: absolute;
         top: 50%;
         left: 50%;
         background: #000;
         border: 18px solid #fff;
         border-radius:100%;
         width: 14px;
         height: 14px;
      }
      div{
         width: 50%;
         margin: 10px auto;
         border:4px solid black;
      }
      #text {
         border: 4px solid black;
         background-color: grey;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <div id="main">
      <div>
         <div id="yinyangSymbol"></div>
      </div>
      <div id="text">Be Centered & Balanced</div>
   </div>
</body>
</html>

Updated on: 28-Dec-2023

284 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements