Здравствуйте дорогие пользователи. Сегодня я хочу поделиться с вами красивым эффектом подчеркивания ссылки на чистом CSS.

Вот пример того, что должно у нас получиться:

Давайте сразу приступим к самому простому эффекту. HTML вид ссылки будет простым:

<a href="http://web-wost.ru" target="_blank">WebWost</a>

А теперь посмотрим CSS код:

a {   
    color:#000;  
    text-decoration:none;  
    position:relative;
}
a:after {  
    content: ' ';  
    height:1px; 
    width:0;  
    left:0;  
    background:#000;  
    position:absolute;  
    bottom:-1px;  
    transition:width 0.2s ;
}
a:hover:after {  
    width:100%;
}

Данный эффект создаст при наведении на ссылку нижнее подчеркивание, которое будет расширяться слева на право. За анимацию отвечает такое свойство, как transition. Чтобы анимация шла с права налево необходимо заменить left:0 на right:0 у a:after.

Давайте теперь попробуем сделать такую же полоску, исходящую от центра ссылки. Для этого мы воспользуемся следующими стилями:

a:after {  
    content: ' ';  
    height:1px;  
    width:100%;  
    left:0;  
    background:#000;  
    position:absolute;  
    bottom:-1px;  
    transition: transform 0.2s;  
    transform:scaleX(0);
}
a:hover:after {  
    transform:scaleX(1);
}

Третим примером я хочу показать вам анимацию подчеркивания к центру. Принцип будет почти тот же, что и в первом примере, но в этот раз кроме after мы будем использовать еще и before. Вот такие стили вышли у меня:

a:after {  
    content: ' ';  
    height:1px;  
    width:0;  
    left:0;  
    background:#000;  
    position:absolute;  
    bottom:-1px;  
    transition:width 0.2s ;
}
a:before {  
    content: ' ';  
    height:1px;  
    width:0;  
    right:0;  
    background:#000;  
    position:absolute;  
    bottom:-1px;  
    transition:width 0.2s ;
}
a:hover:after,a:hover:before {  
    width:100%;
}

Думаю пора бы как-нибудь разбавить эти подчеркивания снизу... Давайте реализуем квадрат вокруг ссылки. Ну что же, вот сразу и стили:

a:after,a:before{  
    position:absolute;  
    content: ' ';  
    border-style:solid;  
    border-color:#000;  
    width:100%;  
    height:100%;  
    left:0;  
    top:0;  
    transition:transform 0.2s ease;  
    box-sizing:border-box;
}
a:after {  
    border-width: 1px 0;  
    transform:scaleX(0);
}
a:before{  
    border-width: 0 1px;  
    transform:scaleY(0);
}
a:hover:after{  
    transform:scale(1,1);
}
a:hover:before{  
    transform:scale(1,1);
}

На этом я хочу закончить с примерами анимаций для ссылок. Спасибо за внимание :)