Vertically aligning CSS :before and :after content [duplicate]

Answer 1

I think a cleaner approach is to inherit the vertical alignment:

In html:

Download

And in css:

.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{

This way the icon will align properly in any resolution/font-size combination. Great for use with icon fonts.