Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Getting Modular with Mixins and Functions Pseudo-Element Mixin with @error

Posted by Ran Wang
.a{fill-rule:evenodd;}techdegree seal-36
Ran Wang
Full Stack JavaScript Techdegree Graduate 32,191 Points

Why top offset by 4px?

How can Guil just pick 4px as top offset for the pseudo element then it is perfectly centered? Where does the calculation comes from?

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

If I mock this up in Sketch, I can see that 4px centres the middle bar vertically and offsets it from the top bar (by 4px).

1 Answer

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

top: 4px will push down the "meat portion" of the hamburger menu by 4px so the middle line will be centered.

Remember: It's displayed absolute by default.