text-decoration-style

Делает декоративные линии текста стильными.

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

Кратко

Секция статьи "Кратко"

Свойство text-decoration-style управляет стилем декоративной линии для текста (подчёркивание, перечёркивание и другие).

Если стиля всё мало, то можно заодно их и разукрасить с помощью text-decoration-color 🌈

Пример

Секция статьи "Пример"
        
          
          .subject {  text-decoration-style: solid;}.participle {  text-decoration-style: dotted;}.predicate {  text-decoration-style: double;}
          .subject {
  text-decoration-style: solid;
}

.participle {
  text-decoration-style: dotted;
}

.predicate {
  text-decoration-style: double;
}

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

Как пишется

Секция статьи "Как пишется"

Возможные значения:

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

С помощью свойства text-decoration-style можно сделать текстовые линии красивее и информативнее. Например, подчеркнуть слово с орфографической ошибкой:

        
          
          span {  text-decoration-line: underline;  text-decoration-color: red;  text-decoration-style: wavy;}
          span {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

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

Или сделать необычную ссылку:

        
          
          a {  color: #ffffff;  text-decoration-color: orange;  text-decoration-style: dotted;}
          a {
  color: #ffffff;
  text-decoration-color: orange;
  text-decoration-style: dotted;
}

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

Добавить декоративную линию и навести красоту можно с помощью псевдоэлементов ::first-line для первой строки текста или ::first-letter для первой буквы в нём.

        
          
          .dotted::first-line {  text-decoration-line: underline;  text-decoration-style: dashed;}.double::first-letter {  text-decoration-line: underline;  text-decoration-style: double;}
          .dotted::first-line {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.double::first-letter {
  text-decoration-line: underline;
  text-decoration-style: double;
}

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

Стилизуются и другие линии, кроме назначенных свойством text-decoration-line. Например, созданные внутри HTML-разметки с помощью тегов вроде <del> или <u>.

        
          
          u {  text-decoration-style: wavy;}
          u {
  text-decoration-style: wavy;
}

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