解释这个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属性使动画起作用.