Подчеркиваем ссылки и текст — text-decoration

text — decoration

Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text — decoration : underline часто встречается при работе со ссылками.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text — decoration .

   
Диакритические знаки.
  
В типографике.
  
Диакритическими знаками не могут.
  
Черта сверху — типографический знак.
   div class="parent"> p class="none">Диакритические знаки. p> p class="underline">В типографике. p> p class="line-through">Диакритическими знаками не могут. p> p class="overline">Черта сверху — типографический знак. p> div>    Скопировать Скопировано Не удалось скопировать   

 .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none;> .underline  /* Нижнее подчёркивание */ text-decoration: underline;> .line-through  /* Перечёркнутый текст */ text-decoration: line-through;> .overline  /* Линия над текстом */ text-decoration: overline;> .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none; > .underline  /* Нижнее подчёркивание */ text-decoration: underline; > .line-through  /* Перечёркнутый текст */ text-decoration: line-through; > .overline  /* Линия над текстом */ text-decoration: overline; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

По факту свойство text — decoration является шорткатом и позволяет указать значения для свойств:

• text — decoration — line — положение декоративной линии;
• text — decoration — style — стиль декоративной линии;
• text — decoration — color — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Положение линии

Скопировать ссылку «Положение линии» Скопировано

Пишем свойство text — decoration и после двоеточия указываем одно из доступных значений:

• underline — подчёркнутый текст.
• line — through — перечёркнутый текст.
• overline — надчёркнутый текст, линия находится над словами.
• none — отменяет все эффекты.

Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.

Стиль линии

Скопировать ссылку «Стиль линии» Скопировано

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

Для управления стилем линии используются следующие ключевые слова:

• solid — сплошная линия. Значение по умолчанию.
• double — двойная линия.
• dotted — точечная линия.
• dashed — пунктирная линия.
• wavy — волнистая линия.

Управлять стилем подчёркивания обычно не требуется, но об этой возможности знать нужно.

Как будет выглядеть двойное перечёркивание:

 p  text-decoration: line-through double;> p  text-decoration: line-through double; >    Скопировать Скопировано Не удалось скопировать   

Стиль линии можно указать отдельно при помощи свойства text — decoration — style .

Цвет линии

Скопировать ссылку «Цвет линии» Скопировано

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text — decoration .

Мы можем изменить это значение, указав после ключевых слов типа и стиля линии код цвета в любом доступном в вебе формате.

Например, сделаем двойное подчёркивание красного цвета:

 p  text-decoration: underline double #ff0000;> p  text-decoration: underline double #ff0000; >    Скопировать Скопировано Не удалось скопировать   

Цветом линии можно управлять отдельно при помощи свойства text — decoration — color :

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

💡 Свойство text — decoration целиком нельзя анимировать при помощи свойства transition 😒

Но можно анимировать цвет линии!

Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.

 
К диакритикам.
 
Дополнение подчёркивается.
 
Эпанортозис.
 
В большинстве языков.
  p class="none">К диакритикам. p> p class="underline">Дополнение подчёркивается. p> p class="line-through">Эпанортозис. p> p class="overline">В большинстве языков. p>    Скопировать Скопировано Не удалось скопировать   

 p  transition: text-decoration-color 0.3s;> .none  text-decoration: none;> .underline  text-decoration: underline;> .line-through  text-decoration: line-through;> .overline  text-decoration: overline;> .dotted  text-decoration-style: dotted;> .double  text-decoration-style: double;> .wavy  text-decoration-style: wavy;> .blue:hover  text-decoration-color: #1a5ad7;> .red:hover  text-decoration-color: #ed6742;> .green:hover  text-decoration-color: #49a16c;> p  transition: text-decoration-color 0.3s; > .none  text-decoration: none; > .underline  text-decoration: underline; > .line-through  text-decoration: line-through; > .overline  text-decoration: overline; > .dotted  text-decoration-style: dotted; > .double  text-decoration-style: double; > .wavy  text-decoration-style: wavy; > .blue:hover  text-decoration-color: #1a5ad7; > .red:hover  text-decoration-color: #ed6742; > .green:hover  text-decoration-color: #49a16c; >    Скопировать Скопировано Не удалось скопировать   

💡 Нельзя управлять толщиной и точным положением линии, заданной при помощи text — decoration .

💡 Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы : : before или : : after .

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

🛠 Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line — height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text — decoration и используем border — bottom или логический аналог border — block — end .

       О магазине   О тыквах   О нас   Контакты      
Магазин «Резная тыква»   header> div class="container top"> nav> ul class="navigation"> li class="navigation__item"> a href="#" class="navigation__link">О магазинеa> li> li class="navigation__item"> a href="#" class="navigation__link">О тыквахa> li> li class="navigation__item"> a href="#" class="navigation__link">О насa> li> li class="navigation__item"> a href="#" class="navigation__link">Контактыa> li> ul> nav> div> div class="container"> h1>Магазин «Резная тыква»h1> div> header>    Скопировать Скопировано Не удалось скопировать   

 .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none;> .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor;> .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none; > .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor; >    Скопировать Скопировано Не удалось скопировать   

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text — decoration : none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

🛠 Отдельные свойства — text — decoration — line , text — decoration — style и text — decoration — color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

Источник

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

Как сделать подчеркивание ссылок или текста через CSS? Нередко на сайтах используют ссылки без подчеркивания. И только при наведении курсора мыши на ссылку, подчеркивание появляется.

Рассмотрим два способа подчеркивания.

Способ №1: свойство text-decoration

У свойства text-decoration есть разные значения: подчеркивание, перечеркивание, линия над текстом и мигание.

Нас интересует простое подчеркивание, которое задаётся добавлением в css-файл следующего кода:

Добавим в html-файл следующий код:

      Наведи на меня курсор – появится подчеркивание  

Посмотрите результат, попробуйте внести изменения при переходе в песочницу:

Способ №2: использование свойства border-bottom

Теперь давайте сделаем наоборот: по умолчанию ссылка подчёркнута, а при наведении курсора мыши — пропадает.

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента, что добавляет сразу несколько преимуществ.

Код HTML-файла:

      Наведи на меня курсор – подчёркивание пропадёт  

Добавим в CSS-файл следующий код:

Код для оформления (стиль body) добавляю в песочнице, а здесь оставила лишь тот, что касается ссылок.

Смотрим результат в песочнице:

Старайтесь не копировать весь код, а писать его самостоятельно, так вы оттачиваете до автоматизма свои навыки.

Пока на этом всё. Желаю вам успехов в освоении HTML и CSS! 🙂

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

Источник