遷移に下線を付けてリンクする

Question

どのようにして滑らかな遷移でリンクの下線を追加すると考えられますか？

このウェブサイトのヘッダーにあるようにlink！

Answer 1

ここで多くのプログラマは失礼である理由をリンクメイト

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

とまったく同じには分からないように私はあなたのためにそれを作りました。

Answer 2

は、私はそのあなたが

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>