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
 
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
 
sumitsaurabh927 profile image
Sumit Saurabh

Yet another good read!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal • Edited

Thanks Sumit!

Collapse
 
ramk777stack profile image
Ramkumar.barani

Great explanation!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal

Thank you @ramk777stack!

Collapse
 
charukirticc profile image
Charukirti Chougule

It was good to read blog!!

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal

Thanks Charukirti!

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!