text-decoration-style

Свойство 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;
}

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