CSS ::before and ::after

Mert Enercan
3 min readNov 12, 2022

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

LinkedIn

GitHub

--

--