链接下划线与过渡

Question

怎么可能认为css添加链接下划线并平滑过渡？

此网站的标题链接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>