Animated nav underlines

HTML

<p>
  <a href>Home</a> &nbsp;
  <a href>About</a> &nbsp;
  <a href>Descriptions</a> &nbsp;
  <a href>Tools &amp; Settings</a> &nbsp;
  <a href>Contact</a> &nbsp;
</p>

CSS

a {
  text-decoration: none;
  position: relative;
}

a::after {
  position: absolute;
  content: "";
  height: .1em;
  top: 100%;
  background: currentColor;
  z-index: -1;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.95, .05, .795, .035);
}

a:hover::after {
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);  
  transform: scaleX(1);
}