DEV Community 👩‍💻👨‍💻

Nasirul Islam
Nasirul Islam

Posted on

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

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; 
}

Enter fullscreen mode Exit fullscreen mode


**

::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; 
}

Enter fullscreen mode Exit fullscreen mode


**

::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; 
}

Enter fullscreen mode Exit fullscreen mode


**

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.

Reference

  1. MDN Web Docs
  2. W3Schools Web Docs

Thanks for reading

Reach out to me on:

  1. Portfolio
  2. GitHub
  3. LinkedIn

Top comments (2)

Collapse
 
said7388 profile image
ABU SAID RIYAZ

Carry on bother

Collapse
 
nasirulislam profile image
Nasirul Islam

thanks brother

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.