Skip to content
Related Articles

Related Articles

How to add space (” “) after an element using :after selector in CSS ?
  • Last Updated : 26 Feb, 2019

The :after selector in CSS is used to add same content multiple times after the content of other elements. It inserts something after the content of each selected element.

Syntax:

:after {
    // CSS Property
}

Example 1: This example uses :after selector to add space after an element.




<!-- HTML code to add space after the
    selected element -->
<!DOCTYPE html>
<html>
      
<head>
    <title>
        Add space after selected element
    </title>
      
    <!-- Style to add space after selected
        element -->
    <style>
        p:after { 
            content:"\00a0 World-with space"
        }
        p.GFG:after { 
            content:"World-without space"
        }
    </style>
</head>
  
<body>
    <p>Hello</p>
    <p class="GFG" >Hi</p>
</html>

Output:

Example 2: This example uses :after selector to add space after an element.




<!-- HTML code to add space after the
    selected element -->
<!DOCTYPE html>
<html>
   <head>
       <title>
           Add space after selected element
       </title>
         
       <!-- Style to add space after the
        selected elements -->
       <style>
          h2 {
            text-decoration: underline;
          }
          h2.space:after {
              content: " ";
              white-space: pre;
          }
       </style>
    </head>
      
    <body>
        <h2>I don't have a space:</h2>
        <h2 class="space">I have a space:</h2>
   </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :