DEV Community

Cover image for CSS Hacks: What is ::before and ::after?
John Palmgren
John Palmgren

Posted on

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

::before and ::after are CSS pseudo elements. They can add content before or after that element. This is the syntax

.class::after {
  content: "some content"
}
Enter fullscreen mode Exit fullscreen mode

This can be used with pseudo classes to add content when an event occurs. In the example below text is added when there is a hover event.

The ::before and ::after pseudo elements can also be added with no content content:"" and can be used to add styles to the document. The below example shows how you can add a border when hovering with ::after and the transition property.

What else can you do with ::before and ::after? Leave a comment below

Top comments (5)

Collapse
 
alfiks profile image
alfiks

Good stuff. I sometimes use pseudo elements to add icons from Font Awesome to menu items.

Collapse
 
johnpalmgren profile image
John Palmgren

That's a great idea 🙌

Collapse
 
johnpalmgren profile image
John Palmgren

I didn't know that. Thanks for your reply 👍

Collapse
 
imranhrafi profile image
Imran H Rafi

a proper description would be helpful for begginers.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇