title: How to keep active menu item underlined?
body: <p>I'm really new to HTML and CSS. I have a navbar which underlines  the menu item you hover with a fade in, fade out-effect from the middle,
  but how can I keep an active menu item underlined with the same style?</p>
  
  <p>I'm also using Typo3 / Fluid which creates me the html code and assigns the "active" class to the active menu item.</p>
  
  <p>This is how it looks like so far: <a href="https://jsfiddle.net/wr5w09r0/" rel="nofollow">https://jsfiddle.net/wr5w09r0/</a></p>
  
  <p>css</p>
  
  <pre><code>div#top_nav{
      text-align: center;
  }
  
  div#top_nav li{
      display: inline;
      padding: 15px;
  }
  
  div#top_nav a {
  
  display: inline-block;
  position: relative;
  
  }
  
  div#top_nav a:hover{
      color: orange;
  }
  
  
  div#top_nav a:before{
  
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: orange;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.15s ease-in-out 0s;
    transition: all 0.15s ease-in-out 0s;
  
  }
  
  div#top_nav a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  
  .active {
      color: orange;
  }
  </code></pre>