CSS приклад: text-decoration-line

Тег text-decoration-line у CSS

Тег text-decoration-line в CSS визначає, як додавати декоративну лінію до тексту - підкреслення, перекреслення, над текстом. Можна додати кілька ліній одночасно, перераховуючи значення через пробіл.

Синтаксис

text-decoration-line: [ line-through || overline || underline ] | none

Значення

line-through
Створює перекреслений текст (приклад).
overline
Лінія проходить над текстом (приклад).
underline
Встановлює підкреслений текст (приклад).
none
Скасовує всі ефекти, включаючи підкреслення у посиланнях, яке задано за замовчуванням.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-line</title>
  <style>
   a {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: wavy;
    -moz-text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Посилання з підкресленням</a>
 </body>
</html>

Браузери

Firefox підтримує властивість -moz-text-decoration-line.

Часті запитання

  • Q: Як використовувати text-decoration-line в CSS?

    A: Властивість text-decoration-line в CSS вказує тип лінії декорації тексту, яку можна використовувати для підкреслення тексту. Можливі значення: none, underline, overline, line-through, blink.

  • Q: Де можна застосовувати text-decoration-line в CSS?

    A: Властивість text-decoration-line можна застосовувати до будь-яких текстових елементів веб-сторінки, таких як заголовки, параграфи, посилання тощо.

  • Q: Як відмінити підкреслення тексту за допомогою text-decoration-line в CSS?

    A: Для того, щоб відмінити підкреслення тексту за допомогою text-decoration-line в CSS, слід встановити значення 'none' для цієї властивості.

  • Q: Як підкреслити текст верхньою лінією за допомогою text-decoration-line в CSS?

    A: Для підкреслення тексту верхньою лінією за допомогою text-decoration-line в CSS встановіть значення 'overline' для цієї властивості.

  • Q: Як можна створити анімоване підкреслення тексту в CSS за допомогою text-decoration-line?

    A: Для створення анімованого підкреслення тексту в CSS за допомогою text-decoration-line можна використовувати значення 'underline' разом з анімаційними властивостями, наприклад, keyframes.