Height on horizontal Navigation Bar is messing up when adding a pseudo element

Question

I am creating a simple horizontal navigation. Trouble I'm running into is when I am adding a css triangle to the "active" page using <after> pseudo element, the overall <li> height for that item is increasing, which throws the whole bar off.

I'm sure I'm just overlooking something, but I've tried troubleshooting it and the solution is eluding me. Any help would be very much appreciated!

Here is a codepen: http://codepen.io/joshmath/pen/HiBvd

Answer 1

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;
    }
  }
}

Answer 2

You just need to add a position relative to your menu item, then the after can be positioned absolute, then it won't affect your height.

Code Snippet below

 nav ul li.current{
   position:relative;
    a{
      color: #3ad2bc;
    }
    &:after{  //colored triangle
      content: '';
      width: 0px; 
      height: 0px; 
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;      
      border-top: 6px solid #3ad2bc;
      margin-left: 0;
      position:absolute;
      bottom: -10px;
      left:50%;
      margin-left:-12px;
    }
  }

Answer 3

check this codePen I adding a

position: relative;
text-align: center;

in li properties and position absolute in pseudo element added