Własność CSS text-decoration-line

Własność CSS text-decoration-line określa rodzaj linii dekoracyjnej tekstu elementu (podkreślenie, przekreślenie lub linia nad tekstem).

Za pomocą własności text-decoration-style i text-decoration-color można dodatkowo zdefiniować style tej linii (np. przerywana albo falowana) oraz jej kolor.

Wartości i składnia

Własność text-decoration-line jako wartości przyjmuje następujące słowa kluczowe:

blink

Tworzy migający tekst (wartość wycofywana i niezalecana)

line-through

Przekreślenie

none

Brak dekoracji

overline

Linia nad tekstem

underline

Podkreślenie

Słów kluczowych line-through, overline i underline można używać w dowolnej kolejności i liczbie, tzn. można użyć tylko jednego z nich, dowolnych dwóch lub wszystkich trzech na raz.

Przykłady

Poniżej znajduje się kilka przykładów użycia własności text-decoration-line.

Przekreślenie tekstu

Aby przekreślić tekst elementu, należy własności text-decoration-line nadać wartość line-through:

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

Efekt:

Podkreślenie tekstu

Aby podkreślić tekst, należy nadać własności text-decoration-line wartość underline:

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

Efekt:

Podsumowanie