Плавное появление подчёркивания при наведении на ссылку

by knowonline

HTML

<p>Эффект плавно появляющейся подчёркивания при наведении на ссылку</p>
<a href="#">HTML 5</a> и <a href="#">CSS 3</a>

<!-- Пример сайта know-online.com -->

CSS

body {
    font-family: verdana;
    font-size: 14px;
}

a {
    color: blue;
    font-size: 24px;
    display: inline-block;
    text-decoration: none;
    position: relative;
}

a::after {
    content: "";
    background: blue;
    width: 100%;
    position: absolute;
    height: 2px;
    top: 28px;
    left: 0;
    opacity: 0;
    transition: opacity .2s, top .2s;
}

a:hover::after {
    top: 34px;
    opacity: 1;
}