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>
          <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 и после двоеточия указываем одно из доступных значений:

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

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

Стиль линии

Секция статьи "Стиль линии"

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

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

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

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

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

        
          
          selector {  text-decoration: line-through double;}
          selector {
  text-decoration: line-through double;
}

        
        
          
        
      

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

Открыть демо в новой вкладке

Цвет линии

Секция статьи "Цвет линии"

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

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

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

        
          
          selector {  text-decoration: underline double #ff0000;}
          selector {
  text-decoration: underline double #ff0000;
}

        
        
          
        
      

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

Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Свойство не наследуется.

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

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

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

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

        
          
          <p class="none">К диакритикам...</p><p class="underline">Дополнение подчёркивается...</p><p class="line-through">Эпанортозис...</p><p class="overline">В большинстве языков...</p>
          <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.

        
          
          <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>
          <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;  padding-top: 24px;  padding-bottom: 24px;}.navigation__link:hover {  /* нивелируем размеры рамки */  padding-bottom: 20px;  /* добавляем рамку снизу */  border-bottom: 4px solid #18191C;}
          .navigation__link, .navigation__link:visited {
  /* делаем элементы строчно-блочными */
  display: inline-block;
  /* убираем подчёркивание */
  text-decoration: none;
  padding-top: 24px;
  padding-bottom: 24px;
}

.navigation__link:hover {
  /* нивелируем размеры рамки */
  padding-bottom: 20px;
  /* добавляем рамку снизу */
  border-bottom: 4px solid #18191C;
}

        
        
          
        
      
Открыть демо в новой вкладке

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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

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