CSS ::before and ::after
Okay it’s 5 in the morning, and i decided to write and article about css ::before and ::after pseudo-element instead of sleeping. So here we go !
Actually, it has quite simple purpose. If you think like there is a “imaginary div” after the selected div, thats the ::after pseudo element. And before, yes it’s ::before psuedo element. Thats basically it. Thank you for reading, have a great day/night !
Okay beside jokes, lets understand the terms with example ;
Designing a hamburger menu icon was the easiest way to understand the concept for me, so i go with this way.
I have an app div, and hamburger div for wrapping bars. Thats it for HTML, lets see what CSS looks like ;
Hamburger wrapper has some width and height, also is centered flex div. haburger__bar has 100% of the parent width and 4px of height. I also set a border for wrapper, so we can see it clearly. This is the current result ;
Now lets add :before and :after psuedo elements to it and see whats happening.
This is the final CSS code. I set the content ‘’ which is empty, position as absolute and now i can set the distance between bars however i want ! Just need to keep the value of bottom of before, and top of after classes the same ! When i remove the border from wrapper, this is how it looks like ;
And with the 5 lines of html code and some css, we have a hamburger menu icon !
Thats it for now, i guess? I hope things are clear to you, until next time.
KEEP GRINDING
