w3docs logo

CSS свойство text-decoration-line

Свойство text-decoration-line устанавливает, какой вид линии должен быть использован для текстового оформления.

Свойствоtext-decoration-line может иметь одно или несколько значений.

Кроме нижеприведенных значений, свойство text-decoration-line имело еще значение "blink" (мигание текста). Это значение устарело.

Расширение -webkit- для Safari используется со свойством text-decoration-line.
Значение по умолчанию none
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.textDecorationLine = "overline underline";

Синтаксис

text-decoration-line: none | underline | overline | line-through | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      -webkit-text-decoration-line: overline; /* Safari */
      text-decoration-line: overline; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-line</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Пример со значением "underline":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      -webkit-text-decoration-line: underline; /* Safari */
      text-decoration-line: underline; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-line</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Пример со значением "line-through":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p{
      -webkit-text-decoration-line: line-through; /* Safari */
      text-decoration-line: line-through; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-line</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.t1 {
      -webkit-text-decoration-line: none; /* Safari */
      text-decoration-line: none; 
      }
      div.t2 {
      -webkit-text-decoration-line: underline; /* Safari */
      text-decoration-line: underline; 
      }
      div.t3 {
      -webkit-text-decoration-line: line-through; /* Safari */
      text-decoration-line: line-through; 
      }
      div.t4 {
      -webkit-text-decoration-line: overline; /* Safari */
      text-decoration-line: overline; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-decoration-line</h2>
    <div class="t1">Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div class="t2">Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div class="t3">Lorem Ipsum - это текст-"рыба",,.</div>
    <br>
    <div class="t4">Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>

Значения

Значение Описание
none Линия не указана.
underline Линия указана под текстом.
overline Линия указана над текстом.
line-through Линия проходит через текст.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
57.0+ 36.0+ 12.1+ ✓

Практикуйте свои знания

Какие значения может иметь свойство CSS 'text-decoration-line'?
Считаете ли это полезным?