Link Unterstreichung mit Übergang

Question

Wie ist es möglich, dachte css fügen Sie den Link unterstreichen mit einem reibungslosen Übergang?

Solche in der Kopfzeile dieser Website link!

Answer 1

Ich habe es für Sie genau das gleiche wie der Link paaren

ul{ 
 
    list-style: none; 
 
    position:relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
li { 
 
     display: flex; 
 
    margin: 0 0.5rem; 
 
    font-size: 1.1rem; 
 
    line-height: 2rem; 
 
    cursor: pointer; 
 
    flex: 1; 
 
} 
 

 
a{ 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 

 
a:after{ 
 
    cursor: pointer; 
 
    content: ''; 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 0; 
 
    height: 2px; 
 
    background: #b5cad7; 
 
    transition: width .4s; 
 
} 
 

 
a:hover:after{ 
 
    width:100%; 
 
}

<ul> 
 
<li><a href="#">Test 1</a></li> 
 
<li><a href="#">Test 1</a></li> 
 
<li><a href="#">Test 1</a></li> 
 
<li><a href="#">Test 1</a></li> 
 
</ul>

MyFiddle

Sie wissen nicht, warum hier viele Programmierer unhöflich sind.

Answer 2

sehen dies i seine Hoffnung, was Sie wollen

li { 
 
    margin-bottom: 10px; 
 
} 
 

 
.cool-link { 
 
    display: inline-block; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.cool-link::after { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 2px; 
 
    background: #000; 
 
    transition: width .3s; 
 
    margin: 0 auto; 
 

 
} 
 

 
.cool-link:hover::after { 
 
    width: 100%; 
 
    //transition: width .3s; 
 
}

<ul> 
 
    <li><a class="cool-link" href="#">A cool link</a></li> 
 
    <li><a class="cool-link" href="#">A cool link</a></li> 
 
    <li><a class="cool-link" href="#">A cool link</a></li> 
 
</ul> 
 

 
<a class="cool-link" href="http://youtu.be/t9nQDdrPgZ0">Check out the associated YouTube Screencast!</a>