text-decoration-line

Свойство text-decoration-line создаёт декоративные линии в тексте.

Заодно их можно разукрасить при помощи свойства text-decoration-color и стилизовать с помощью text-decoration-style 👀

Украсим текст парой линий.

        
          
          .underline {  text-decoration-line: underline;}.line-through {  text-decoration-line: line-through;}
          .underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

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

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

• none — линия не выводится (значение по умолчанию);
• underline — линия выводится под текстом, подчёркивание;
• overline — линия выводится над текстом, надчёркивание;
• line-through — линия выводится по центру текста, перечёркивание.

Из линий можно создавать комбинации, например:

• underline overline — линия выводится сверху и снизу текста;
• underline line-through — линия выводится снизу и по центру текста;
• overline line-through — линия выводится сверху и по центру текста.

Или вовсе добавить сразу три значения:

• overline underline line-through — линия выводится везде.

💡 С помощью свойства text-decoration-line можно легко убрать дефолтное подчёркивание ссылки: достаточно указать значение none.

        
          
          a {  text-decoration-line: none;}
          a {
  text-decoration-line: none;
}

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