text-decoration

Свойство 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-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. Но для ссылок (<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.

        
          
          <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;}.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;
}

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