title: How to animate a link underline with border-bottom, so that there is space between the link text and the underline?
body: <p>How could I animate the link underline with using border-bottom, so that there is space between the text and the underline? </p>
  
  <p>I know how to do it in the following way, so that the default text-decoration element is animated. But I would like to have space between the link and the underline, that is why I think I need to use border-bottom. But I can't get the border-bottom work with the transition animation. How could I do this? I tried looking for other solutions, but couldn't find any. Thanks!</p>
  
  <pre><code>h2 &gt; a {
    position: relative;
    color: #000;
    text-decoration: none;
  }
  
  h2 &gt; a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    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;
  }
  
  h2 &gt; a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  </code></pre>