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
 
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
 
hemazyn profile image
Hemazyn

Great job

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
akinchineye profile image
Akinchineye

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