Explain this CSS link underline animation

Question

I'm trying to create a little animation so when I hover over a link it underlines the link from the middle - JS Fiddle

The CSS code below works but I don't understand how it works. Please can someone break it down for me.

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 creates a block with empty inline text after link. Then display:block makes it block type like for instance div default behaiour, so it goes to the next line with height: 3px and with width: 0 (so not visible). And also centered because of margin:auto; Once you hover link this block gets the witdh and becomes visible. The transition attribute makes the animation work.