Smaller underline effect [duplicate] - html

Question

This question already has answers here:
Title with bottom border smaller than width
(7 answers)
Closed 8 years ago.
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> Home </li>
<li> About </li>
<li> Work </li>
<li> Blog </li>
<li> Contact </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*/
}

Answer 3

Without additional HTML:
jsFiddle
You can use the "after" css property:
a:after {
display: block;
position: absolute;
content:"__";
width: 100%; top: 10px;
text-align: center;
left: 0;
}

Answer 4

You can use an :after pseudo-element to append extra markup your a elements:
Like all the other answers, but perhaps a little less CSS required.
a:after {
display: block;
content: "";
width: 60%;
margin: 0 auto;
border-bottom: solid 1px steelblue;
}
http://codepen.io/anon/pen/qebHo

Answer 5

use "after" property to achieve this. : 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 as well 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 demo 2
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: border animated