What is ::before and ::after in CSS?

#css #html #webdev #beginners

What is ::before and ::after in CSS?

In CSS ::before and ::after is a type of pseudo-elements. This allows us to add something before or after an element without the use of HTML.

We use these types of pseudo-elements at different times when designing a website. The simplest example to understand, the bullet mark in front of the list. This way you can add text before or after an element if you want using pseudo-elements.

In this tutorial, we will discuss with examples, how to use ::before and ::after pseudo-elements to sort content on a web page. This tutorial will give you a good idea of how to use :: before and :: after pseudo-elements in CSS.

Pseudo Element in CSS

Pseudo-elements are visible elements on a web page that are not "in DOM" or created from HTML but inserted directly from CSS. It plays a helpful role in various web page designs. It beautifully supports different browsers.

A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element. For example, ::first-line can be used to change the font of the first line of a paragraph. Since, ::first-line, ::first-letter, ::before, and ::after is a pseudo-element. That's why we need to know about pseudo-element first. So, we are discussing about this.

To use pseudo-element you must enter, As a rule, double colons (::) after selector.
Like this syntax -

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

::before Pseudo-Element in CSS

The ::before selector inserts something before the content of each selected element. The ::before pseudo-element adds content that appears before an element on a web page. In most cases, it is used to add text before an element.

The ::before pseudo-element syntax is -

selector::before { 
property: value; 
}

::after Pseudo-Element in CSS

The ::after selector inserts something after the content of each selected element. The ::after pseudo-element adds content that appears after an element on a web page. In most cases, it is used to add text after an element.

The ::after pseudo-element syntax is -

selector::after  { 
property: value; 
}

Conclusion

The ::before and ::after pseudo-elements allow you to add content to a specific part of an element you have selected in a CSS rule. The simplest example, the ::before selector could be used to add text before a link. The ::after selector could be used to add a bullet sign after a paragraph of text.