DEV Community

Nasirul Islam
Nasirul Islam

Posted on

4 1

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

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (2)

Collapse
 
said7388 profile image
ABU SAID

Carry on bother

Collapse
 
nasirulislam profile image
Nasirul Islam

thanks brother

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay