Thick underline when hover AND when active

Question

I am trying to make a simple navigation menu consisting of links with an animating underline, as demonstrated by Tobias Ahlin http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

I get this to work, however I can't figure out how to have the underline visible immediately if the list element is active.

Any help is welcome, thanks a lot!

Fiddle: https://jsfiddle.net/131d8q1v/5/

HTML:

<div class="container">
    <ul>
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

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

Answer 1

Add this rule:

li.active a:before,
a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

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

li.active a:before,
a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<div class="container">
  <ul>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>