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

我正在尝试创建一个小动画,所以当我将鼠标悬停在链接上时,它会强调从中间的链接 – 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;
}

a：在链接后创建一个带有空内联文本的块.然后显示：块使其成为块类型,例如div默认为behaiour,因此它将转到下一行,其高度为：3px,宽度为：0(因此不可见).并且因为保证金而居中：auto;一旦你悬停链接这个块得到witdh并变得可见. transition属性使动画起作用.