解释这个CSS链接下划线动画

Question

我正在尝试创建一个小动画,所以当我将鼠标悬停在一个链接上时,它强调了来自中间的链接 - JS Fiddle

下面的CSS代码有效,但我不明白它是如何工作的.请有人可以帮我分解.

a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
a:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
    width: 100%;
    background: blue;
}

Answer 1

a:after在链接后创建一个带有空内联文本的块.然后display:block 使它成为块类型,例如div默认behaiour,所以它转到下一行with height: 3px和with width: 0(所以不可见).而且也因为中心margin:auto; 一旦你悬停链接这个块得到witdh并变得可见.该transition属性使动画起作用.