Как сделать подчеркивание через CSS
Привет, всем!
Как сделать подчеркивание ссылок или текста через CSS? Нередко на сайтах используют ссылки без подчеркивания. И только при наведении курсора мыши на ссылку, подчеркивание появляется.
Рассмотрим два способа подчеркивания.
Способ №1: свойство text-decoration
У свойства text-decoration есть разные значения: подчеркивание, перечеркивание, линия над текстом и мигание.
Нас интересует простое подчеркивание, которое задаётся добавлением в css-файл следующего кода:
a {
text-decoration: none; /* Убираем подчеркивание у ссылок */
color: #032850; /* Цвет ссылки */
}
a:hover {
text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */
}
Добавим в html-файл следующий код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчеркиваем ссылки и текст - text-decoration</title> </head> <body> <a href="#">Наведи на меня курсор – появится подчеркивание</a> </body> </html>
Посмотрите результат, попробуйте внести изменения при переходе в песочницу:
Способ №2: использование свойства border-bottom
Теперь давайте сделаем наоборот: по умолчанию ссылка подчёркнута, а при наведении курсора мыши — пропадает.
Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента, что добавляет сразу несколько преимуществ.
Код HTML-файла:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-bottom</title> </head> <body> <a href="#">Наведи на меня курсор – подчёркивание пропадёт</a> </body> </html>
Добавим в CSS-файл следующий код:
a {
text-decoration: none; /* Убираем подчеркивание ссылок по умолчанию */
color: #000; /* Цвет ссылки */
border-bottom: 1px solid #000; /* Добавляем подчеркивание сплошной линией черного цвета */
padding-bottom: 5px; /* Добавляем отступ между текстом и линией */
}
a:hover {
border-bottom: 1px solid rgba(0,0,0,0); /* При наведении делаем подчеркивание прозрачным */
}
Код для оформления (стиль body) добавляю в песочнице, а здесь оставила лишь тот, что касается ссылок.
Смотрим результат в песочнице:
Старайтесь не копировать весь код, а писать его самостоятельно, так вы оттачиваете до автоматизма свои навыки.
Пока на этом всё. Желаю вам успехов в освоении HTML и CSS! 🙂
Поздравляю с прошедшими праздниками! для заполнения пропусков между подчеркиванием и выносными элементами. Но если цвет подчеркивания отличается от цвета текста — или он просто достаточно тонкий, линия не будет сталкиваться с выносными элементами так, как при использовании
Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает, но я опишу кратко: подчеркивание рисуется с помощью элементов
Minarc Evo, отличная библиотека, спасибо за дополнение)