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

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;
}

a::after {
    display: block;
    content: "";
    height: 1px;
    width: 0;
    transition: width 0.5s ease;
    background-color: blue;
}

a:hover::after {
    width: 100%;
}