Less emphasizing effect

Question

I came across an 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 the markup that will not be semantic. I am wondering if this can be achieved with css and without any additional elements. An effect is essentially a lower border / lower border that is smaller than the element and centered below it.

Here is my markup for navigation, where this effect will be used for 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 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

, , : 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*/
   }

Answer 3

HTML: jsFiddle

"" css:

a:after {
  display: block;
  position: absolute;
  content:"__";
  width: 100%; top: 10px;
  text-align: center;
  left: 0;
}

Answer 4

:after, a:

, , , CSS.

a:after {
  display: block;
  content: "";
  width: 60%;
  margin: 0 auto;
  border-bottom: solid 1px steelblue;
}

http://codepen.io/anon/pen/qebHo

Answer 5

"" .: jsFiddle

CSS

.right ul li a{
    position:relative;
    text-decoration:none;
}

.right ul li a:after{
    content: '';
      position:absolute;
      bottom:0;
      left: 30%;
      right: 30%;
      background:black;
    height:1px;
}

Answer 6

You can also use linear backgrounds: DEMO or DEMO 2

CSS demo 1

a {
  margin:1em;
  padding-bottom:0.2em;
  background:linear-gradient(
    to left,
  transparent 33%, 
    #EE7972 33%, 
    #EE7972 66%, 
    transparent 66%
  )
    bottom no-repeat;
  background-size: 100% 3px;
}

CSS 2 Demo

a {
  margin:1em;
  padding-bottom:0.2em;
  background:linear-gradient(
    to left, 
    #EE7972 , 
    #EE7972 
  )
    bottom no-repeat;
  background-size: 1em 3px;
}

Possible animation with this border: animated frame