Создание необычных стилей для ссылок

Демонстрация работы необычных стилей для ссылок, адаптация примера из урока Volkan Görgülü, специально для сайта dejurka.ru

HTML

<a class="alternative1" href="">Это первая длинная ссылка для примера необычных стилей</a><br/><br/>
<a class="alternative2" href="">Это вторая длинная ссылка для примера необычных стилей</a><br/><br/>
<a class="alternative3" href="">Это третья длинная ссылка для примера необычных стилей</a><br/><br/>
<a class="alternative4" href="">Это четвертая длинная ссылка для примера необычных стилей</a><br/>

CSS

a, a:visited {
    color: #105CB6;
    outline: none;
    cursor: pointer;
}

a:hover, a:focus {
    color: #003;
}

.alternative1, .alternative2 {
    text-decoration: none;
    border-bottom: 1px solid #75ABEA;
    padding-bottom: 1px;
}

.alternative2:hover {
    color: green;
    border-bottom: 1px solid red;
}

a.alternative3 {
    text-decoration: none;
    background: url(https://css-tricks.com/examples/AlternativeStyleLinks/images/link-line.gif) repeat-x 0 100%;
    padding-bottom: 1px;
}

a.alternative4 {
    text-decoration: none;
    background: url(https://css-tricks.com/examples/AlternativeStyleLinks/images/link-line2.gif) repeat-x 0 100%;
    padding-bottom: 1px;
}