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 CSS Layout Techniques Flexbox Layout Animating Flexbox

Daniel Politz
Daniel Politz
6,338 Points
Posted by Daniel Politz
Daniel Politz
6,338 Points

Why does declaring left: -30%; in the following code make the icon disappear? 

.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.main-nav a::before {
    font-family: 'icomoon';
    content: attr(data-icon);
    color: #fff;
    position: absolute;
    top: 10px;
    left: -30%;
}
.main-nav a:hover::before {
    left: 10%;
}

To clarify, is it because when declaring "overflow: hidden;" that browser hides anything that runs out of the element? Then replaces it 10% left when hovered over that same element?

I may have answered this I just want to make sure I am grasping this nifty little trick. Thanks

2 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Yup, you're correct!

a::before creates an element inside of the <a> element, but before all of the other content in <a>. Therefore, moving a::before far to the left inside of the parent element with hidden overflow makes the icon disappear until the placement is modified.

Another way to show what hiding overflow does is by creating a paragraph element with lots of text and setting its width and height to something rather small. With overflow visible, the content runs out of the element. With it hidden, it'll be cut off.

Daniel Politz
Daniel Politz
6,338 Points
Daniel Politz
Daniel Politz
6,338 Points

Thanks! Much appreciated.