text-decoration-line

Свойство чтобы подводить черту!

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

Кратко

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

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

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