title: Smaller underline effect
body: <p>I came across interesting underline effect that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/zKAyb.jpg" alt="CSS smaller underline"></p>
  
  <p>It's simple, but I can't think of a way to achieve it without using additional html elements in markup, that will be not semantic. I am wondering if it is possible to achieve it using css and without having any additional elements. Effect is essentially an underline / bottom border that is smaller than element and centered under it.</p>
  
  <p>Here is my markup for navigation, where this effect will be used on current page links.</p>
  
  <pre><code>            &lt;nav id="navigation" class="right"&gt;
                  &lt;ul&gt;
                      &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#"&gt;Work&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#"&gt;Blog&lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>