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