Smaller underline effect [duplicate]

Question

I came across interesting underline effect that looks like this:

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.

Here is my markup for navigation, where this effect will be used on current page links.

            <nav id="navigation" class="right">
                <ul>
                    <li> <a href="#">Home</a> </li>
                    <li> <a href="#">About</a> </li>
                    <li> <a href="#">Work</a> </li>
                    <li> <a href="#">Blog</a> </li>
                    <li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

Answer 1

try this one - http://jsbin.com/lumasive/1/

#navigation li a { position:relative; }
#navigation li a:after {
      content: '';
      position:absolute;
      bottom:0;
      left: 30%;
      right: 30%;
      height: 2px;
      background:red;
      display:block;
}

Answer 2

same as others , the use of a pseudo , but in the flow: DEMO

li ,a { 
  display:inline-block;
  color:#EE7972;
  font-size:40px;
  font-variant:small-caps;
  text-decoration:none;
}
a {
  margin:1em;
}
a:after {
  content:'';
  display:block;
  height:0.2em;
  width:35%;
  margin:auto;
  border-bottom:solid ;
}

   a:hover {
      color:turquoise;/* change color of text and mini-border*/
   }