::before and ::after to create a hamburger icon
Hey all!
This is the code: https://gist.github.com/zenonmesic/ac335a5c48eb1b180e361e2f265ba93e
I am following a guide on how to create a hamburger icon. It uses an empty div and then ::before and ::after to add two extra lines that are then moved above and below the div and that is it. I am playing with it to actually understand how it works and I have read the documentation but it is still not clear to me.
Note before I start: I changed some colors, added the 1s and changed space-between to space-evenly just to better see and understand things.
The div is in button element, which is an in-line element. Here the button is given square dimensions of 48px. The div is a block-level element inside button but it has no content so it has been given fixed dimensions of 40px x 5px. The button is also set to display: flex to help center that div within the button. It is then given position: relative because we will be using position: absolute within the button.
Next, contentless ::before and ::after are given the same dimensions as our contentless div. Since the div has no real content, ::before and ::after have the same starting point, which is "in the middle" of our centered div. They have fixed width so they stretch outside of the div.
Okay, so far, so good.
Now, if I add "1" as content to my div and also "11" to ::before and ::after, since div now has some content, ::before moves a bit to the left, and ::after a bit to the right. Also understandable.
Now my questions:
1. What is the parent element of ::before and ::after? The div they are being attached to or the button element?
2. When we put position: absolute in .menu-icon, .menu-icon::before, .menu-icon::after, they are taken outside of the normal flow and now they are placed relative to their parent, in this case the button for menu-icon. Why is menu-icon div centered? Does flex centering still apply to it, even though it is now in absolute "mode"?
This is the code: https://gist.github.com/zenonmesic/ac335a5c48eb1b180e361e2f265ba93e
I am following a guide on how to create a hamburger icon. It uses an empty div and then ::before and ::after to add two extra lines that are then moved above and below the div and that is it. I am playing with it to actually understand how it works and I have read the documentation but it is still not clear to me.
Note before I start: I changed some colors, added the 1s and changed space-between to space-evenly just to better see and understand things.
The div is in button element, which is an in-line element. Here the button is given square dimensions of 48px. The div is a block-level element inside button but it has no content so it has been given fixed dimensions of 40px x 5px. The button is also set to display: flex to help center that div within the button. It is then given position: relative because we will be using position: absolute within the button.
Next, contentless ::before and ::after are given the same dimensions as our contentless div. Since the div has no real content, ::before and ::after have the same starting point, which is "in the middle" of our centered div. They have fixed width so they stretch outside of the div.
Okay, so far, so good.
Now, if I add "1" as content to my div and also "11" to ::before and ::after, since div now has some content, ::before moves a bit to the left, and ::after a bit to the right. Also understandable.
Now my questions:
1. What is the parent element of ::before and ::after? The div they are being attached to or the button element?
2. When we put position: absolute in .menu-icon, .menu-icon::before, .menu-icon::after, they are taken outside of the normal flow and now they are placed relative to their parent, in this case the button for menu-icon. Why is menu-icon div centered? Does flex centering still apply to it, even though it is now in absolute "mode"?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
