DEV Community

Cover image for ::before/::after pseudo elements in CSS - A Complete guide

::before/::after pseudo elements in CSS - A Complete guide

Ritika Agrawal on March 20, 2025

✨ What are ::before and ::after? They are pseudo elements in CSS that are used to insert content, as their name says, either before or a...
Collapse
 
eleftheriabatsou profile image
Eleftheria Batsou •

Nice work!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal •

Thank you Eleftheria!

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh •

Yet another good read!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal • • Edited

Thanks Sumit!

Collapse
 
d7460n profile image
D7460N •

Just a thought... I wonder if attr() can see counter-increment() values? If so, it can be used as a pure CSS unique ID system that would be universally helpful.

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal •

that's an interesting idea 🤔 need to see if it works

Collapse
 
ramk777stack profile image
Ramkumar.barani •

Great explanation!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal •

Thank you @ramk777stack!

Collapse
 
learncomputer profile image
Learn Computer Academy •

Great guide on ::before and ::after!
The examples, like adding quotation marks and hover effects, really clarify their use.
Well-structured and beginner-friendly—thanks for sharing!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal •

Thanks so much for this wonderful feedback!

Collapse
 
charukirticc profile image
Charukirti Chougule •

It was good to read blog!!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal •

Thanks Charukirti!