Как правильно делать ссылки с кастомным подчеркиванием в 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 скриптами, которые будут появляться на той же веб-странице.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.