• Блог
  • HTML&CSS
  • Как сделать подчеркивание через CSS

Как сделать подчеркивание через CSS

4.01.2019 3 комментария 8 453

Привет, всем!

Как сделать подчеркивание ссылок или текста через 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! 🙂

Голосов: 3, Средняя оценка: 5
Top