title: CSS sliding underline
body: <p>I have horizontal menu on my website. I want the menu links to smoothly underline.
  HTML</p>
  
  <pre><code>&lt;nav id="nav_container"&gt;
      &lt;ul id="nav"&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Sportovci&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Specialisté&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Kluby&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Obchody&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Ligy&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Články&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav_item"&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;           
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.nav_item {
      display: inline-block;
      margin: 0 10px;
  }
  
  .nav_item:after {
      content: '';
      display: block;
      height: 1px;
      width: 0;
      background: transparent;
      transition: width .5s ease, background-color .5s ease;
  }
  
  .nav_item:hover:after {
      width: 100%;
      background: #236fe8;
  }
  </code></pre>
  
  <p>With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. I think it will be some JavaScript (jQuery), but don't know how.
  I also want the clicked (active) link to stay underlined. How to do this?</p>
  
  <p>I will be thankful for every kind of answer.</p>