DEV Community

Cover image for Learning about CSS pseudo-elements by building simple things - Part 1: Button and link hover effects.

Learning about CSS pseudo-elements by building simple things - Part 1: Button and link hover effects.

Gaurav on March 16, 2021

Hello everyone! Hope u r doing great. So the thing is I still struggle with understanding CSS pseudo-elements. I don't understand how they work and...
Collapse
 
meetbhalodiya profile image
b-meet • • Edited

hey there i just read it full and you did it great
Not only you but i also understood something from it๐Ÿค“

By the way I had a questionโ“since long time that do we always need to position the pseudo elements, that is the ::after and ::before pseudo-elements ?๐Ÿค”(not only in your case I am asking in general)

Collapse
 
devggaurav profile image
Gaurav •

No we don't have to position them always. I did it because in button example i wanted to put it between the button and the span(button text) so it works like background to that button text.

And in link example i wanted to put the pseudo element below the link (like an underline). That's why i used the position options.

Collapse
 
meetbhalodiya profile image
b-meet •

Thank you so much for quick response ๐Ÿ™

Umm one more
The ::before pseudo element is behind the actual element and ::after pseudo element is in front of the actual element.
Is it true or false
Even in case of a paragraph styling and in case we are designing something as you did..( I hope you understood the question ๐Ÿ˜…๐Ÿ˜…)

Thread Thread
 
devggaurav profile image
Gaurav •

Yes u r right. Lets say u have a h1 says 'hello world' and u put before and after pseudo elements to it then it will appear like this

before Hello world after.

This is a stupid example but hope u get my point๐Ÿ˜…

Thread Thread
 
meetbhalodiya profile image
b-meet •

Ya sure i got you gaurav

Collapse
 
hemazyn profile image
Hemazyn •

Great job

Collapse
 
devggaurav profile image
Gaurav •

Thank u!

Collapse
 
arvindsridharan profile image
arvindsridharan •

Awesome!

Collapse
 
devggaurav profile image
Gaurav •

Thank u!

Collapse
 
hemazyn profile image
Hemazyn •

I will need to add this to my portfolio

Collapse
 
akinchineye profile image
Akinchineye •

Wow that's really great and helpful, i wish u could do some stuff on animation. Thank you!