the :after
element takes up space when it is positioned relatively, so there are two things you can do.
1) set the height of the <li>
:
nav ul {
li {
height: 1em; // 1em == the height of one line of text
overflow: visible; // not required, but good to have
}
}
2) position the pseudo element absolutely (I typically do this)
nav ul {
li.current {
position: relative;
&:after {
position: absolute;
top: 100%; // align the top of the pseudo element with the bottom of li.current
left: 50%; // center
margin-left: -6px; // half the width of the pseudo element to correct the center
// your styles:
content: '';
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3ad2bc;
}
}
}