Рецепты CSS

Пунктирное подчеркивание текста

Иногда при форматировании текстов требуется выделить слово или небольшую часть текста подчеркиванием, эту "непростую" задачу легко решить с помощью CSS. Для этого потребуется окружить нужную часть текста тегом span, которому присвоим класс line, получится вот такой текст:

<p>
Форматирование текста при помощи <span class="line">таблиц стилей</span> занятие довольно-таки увлекательное, можно вдоволь поиздеваться над текстом и его отображением на страницах сайта.
</p>

В CSS напишем вот такую строчку:

.line {border-bottom: 1px dotted red}

И получим вот такой результат:

Форматирование текста при помощи таблиц стилей занятие довольно-таки увлекательное, можно вдоволь поиздеваться над текстом и его отображением на страницах сайта.

Пунктирное подчеркивание ссылки

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

a {text-decoration: none;} /* убираем обычное подчеркивание */

И добавляем:

a {border-bottom: 1px dotted blue;} /* добавляем пунктирное подчеркивание */

В результате получаем ссылки с пунктирным подчеркиванием.