<a href="#">Nav Item <span class="icon-more"></span></a>

<a href="#">Nav Item <span class="icon-more"></span></a>

<a href="#">Nav Item <span class="icon-more"></span></a>

$brandGreen: #82c73a;

a {
  position: relative;
  display: block;
  text-decoration: none;
  display: inline-block;
  margin-left: 2em;
  color: #666;
  font-weight: bold;
  padding-bottom: 10px;
  &.active {
    color: $brandGreen;
    border-bottom: 4px solid $brandGreen;
  }
}

.icon-more {
  display: inline-block;
  width: 10px;
  height: 10px;
  padding-left: 5px;
  &:before, &:after {
    position: absolute;
    top: calc(50% - 6px);
    right: auto;
    width: 10px;
    height: 3px;
    background: #999;
    content: "";
    // transform-origin: 50% 50%;
    will-change: transform;
    transition: all .2s ease;
  }
  &:before {
    transform: 
      rotate(45deg)
      translate(-2px,2px);
  }
  &:after {
    transform: 
      rotate(-45deg)
      translate(2px,2px);
  }

  .active & {
    &:before, &:after {
      // background: $brandGreen;
    }
    &:before {
      transform: 
        rotate(45deg) 
        translate(1px, -1px);
    }
    &:after {
      transform: 
        rotate(-45deg) 
        translate(-3px,-3px);
    }
  }
  
}


body {
  margin: 1em;
}

$("a").click(function(e){
  e.preventDefault();
  $("a").not($(this)).removeClass("active");
  $(this).toggleClass("active");
});