Як правильно робити посилання з кастомным підкресленням в CSS

У разі, якщо виконуєте роботу HTML-верстальника а-ля ви HTML-верстальник, то вам напевно доводилося отримувати від штатного веб-дизайнера компанії або просто веб-дизайнера макети з посиланнями, які мають пунктирне, підкреслення, підкреслювання кольором, відмінним від кольору самої посилання і т. п. Сьогодні я покажу, як їх правильно оформляти, але для початку почну з того способу, яким робить більшість:

a.bad {
text-decoration: none;
border-bottom: 1px dashed #0B8DEF;
}

А правильніше буде ось так, – тут можна досить гнучко регулювати вертикальний відступ між текстом лінка і кастомным підкресленням:

a.good:after {
border-bottom: 1px dashed #0B8DEF;
bottom: 1px;
content: “”;
height: 0;
left: 0;
position: absolute;
right: 0;
}
a.good {
position: relative;
text-decoration: none;
}

Дивимося наочний приклад: першою строчкою представлений мій спосіб верстки, другий рядком – звичайна посилання з text-decoration: underline, ну а третій – звичайний варіант зі звичайним border-bottom. Весь трюк полягає лише в правильному використанні властивостей позиціонування.

Як залишати коментарі: посилання з правильним пунктирним підкресленням.

Як залишати коментарі: звичайне посилання.

Як залишати коментарі: звичайна посилання з пунктирним підкресленням.

Як бачите результат очевидний. Примітно, що такий спосіб є практично кроссбраузерным – працює з Google Chrome, Opera, Mozilla Firefox і навіть Internet Explorer (для тесту я використовував IE 8.x на Microsoft Windows 7).

Наостанок я мабуть нагадаю, що пунктирне підкреслення зазвичай використовується для блоків з JavaScript / JQuery скриптами, які будуть з’являтися на тій же веб-сторінці.