DEV Community

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

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