How to add space (" ") after an element using :after selector in CSS?

CSS Web Development Front End Technology

The space character (" ") is used to add space between elements in CSS. it used in the content property of a pseudo-selector, such as :after or :before, it creates a blank space that can be used to separate elements or add visual spacing to a web page.

In annexation to using the space character, we can also use other CSS properties such as margin, padding, border, or width to add space between elements. These properties allows to control the amount of space and the position of space between elements.

Adding space (" ") after an element using :after selector in CSS

The :after pseudo-selector is used to add content after the content of an element. This is also useful for adding separators, icons, or other visual enhancements to a web page. To add a space after an element using the :after selector, we need to set the content property to a space character (" ") and the display property to inline.

Here is syntax of how to use the :after selector to add a space after a heading element −

:after {
   content: " ";
}

It is important to note that the :after selector only adds content after the element, it doesn't change the layout of the element or its surrounding elements. It will also not add any space if the element is empty.

Example

<!DOCTYPE html>
<html>
   <title>Online CSS Editor</title>
   <head>
      <style>
         body{
            text-align:center;
            background-color:pink;
         }
         h3:after {
            content:" World"
         }
         h3.effect:after {
            content:"to TutorialsPoint"
         }
      </style>
   </head>
   <body>
      <h3>Hello</h3>
      <p> space added after Hello</p>
      <h3 class="effect" >Welcome</h3>
      <p>No space added after Welcome</p>
   </body>
</html>

To add spaces, the :after selector can also be used to add other types of content, such as text, images and list items.

Conclusion

The :after selector is a powerful tool in CSS that used to add content after an element, including spaces. It also be used to enhance the visual appearance of a website, create separators, or add icons and other images. By combining the :after selector with other CSS properties, It creates even more complex and dynamic effects. It is important to keep in mind that the :after selector only adds content after the element, it doesn't change the layout of the element or its surrounding elements.

Shabaz Alam

Updated on: 09-Mar-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started