3 эффекта при наведении на ссылку

1. Плавная смена цвета

Плавную смену цвета можно сделать через transition, в которой содержатся свойства, которые надо анимировать при их изменении.

a {
    color: blue;
    text-decoration: none;

    /* задать анимацию для свойства color */
    transition: color 0.4s;
}

a:hover {
    color: red;
}

Пример кода на JSFiddle

2. Плавное появление подчёркивания

Код ниже в конце каждой ссылки добавляет элементы через псевдоэлемент ::after с нулевой шириной. При наведении на ссылку, ширина элемента увеличивается на ширину текущей ссылки.

a {
    display: inline-block;
}

a::after {
    background-color: navy;
    content: "";
    display: block;
    height: 1px;
    width: 0;

    /* задать анимацию для свойства width */
    transition: width 0.5s ease; 
}

/* Анимация при наведении на ссылку */
a:hover::after {
    width: 100%;
}

Пример кода на JSFiddle

3. Плавное появление подчёркивания (второй вариант)

Код ниже в конце каждой ссылки добавляет прозрачные элементы через псевдоэлемент ::after. При наведении на ссылку, элемент плавно появляется и немного спускается вниз.

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

Пример кода на JSFiddle