Как сделать подчеркивание ссылки пунктиром (css)


Как правило, ссылки подчеркиваются в HTML сплошной чертой, т.к. это является общепринятым стандартом и привычно для пользователей. Однако, если ваш дизайн сайта требует вместо сплошной черты — пунктир, то это вполне приемлемо. Ниже вы узнаете, как сделать подчеркивание ссылки пунктиром с помощью css.

Вот пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Как сделать подчеркивание ссылки пунктиром</title>
<style>
    a.dot-link {
        text-decoration: none;
        border-bottom: 1px dashed #000080;
    }
    a.dot-link:hover {
        text-decoration: underline;
        border-bottom: 0px;
    }
</style>
</head>
<body>
    <a href="http://poleshuk.ru" class="dot-link">Мой сайт</a>
</body>
</html>

Здесь мы создали простой html-файл отображающий ссылку, которой мы присвоили класс «dot-link». В style мы включили стили для этого класса для ссылки в обычном состоянии и при наведении. Главным здесь является свойство «dashed», которое и отображает пунктир. Обратите внимание, что мы убрали нижнее подчеркивание строчкой:

1
text-decoration: none;

но при наведении (hover) мы его возвращаем.

Случайные посты

Категория: HTML, Используем CSS

Оставить комментарий


Яндекс.Метрика