title: Sizing sliding underline
body: <p>I want to make the sliding underline to run from left to right when i hover, and also set up the width of the line from the 1st letter to the last, and not bigger. How can i do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-bar a:hover {
    color: #000;
  }
  
  .nav-bar a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    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;
  }
  .nav-bar a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav-bar"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;RETROSPECTIVE SHOW /2006/&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;TEXTS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;BIBLOGRAPHY&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>