title: Thick underline when hover AND when active
body: <p>I am trying to make a simple navigation menu consisting of links with an animating underline, as demonstrated by Tobias Ahlin <a href="http://tobiasahlin.com/blog/css-trick-animating-link-underlines/" rel="nofollow noreferrer">http://tobiasahlin.com/blog/css-trick-animating-link-underlines/</a></p>
  
  <p>I get this to work, however I can't figure out how to have the underline visible immediately if the list element is active. </p>
  
  <p>Any help is welcome, thanks a lot!</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/131d8q1v/5/" rel="nofollow noreferrer">https://jsfiddle.net/131d8q1v/5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul {
    list-style-type:none;
  }
  
  a {
    position: relative;
    color: #000;
    text-decoration: none;
  }
  
  a:visited {
    color: #000;
    text-decoration:none;
  }
  
  a:hover {
    color: #000;
    text-decoration:none;
  }
  
  a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: -2px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  
  a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  </code></pre>