Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >text-decoration

text-decoration

text-decoration: <line> || <style> || <color> || <thickness>

Skrót dla linii przy tekście: podkreślenia, nadkreślenia albo przekreślenia, razem ze stylem (ciągła, falista …), kolorem i grubością. Najczęściej służy do dostosowania albo usunięcia podkreślenia linków.

Wartości

  • linia (text-decoration-line) – none, underline, overline, line-through, także kilka naraz.
  • styl (text-decoration-style) – solid, double, dotted, dashed, wavy.
  • kolor (text-decoration-color) – domyślnie kolor tekstu.
  • grubość (text-decoration-thickness) – zobacz osobne hasło.

Wartość początkowa: none currentColor solid auto. Dziedziczona: nie. Dotyczy: wszystkich elementów.

Przykłady

Style linii i link z dyskretniejszym podkreśleniem:

<p class="wavy">Falista linia jak przy literówce</p>
<p class="crossed">Pierwotna cena 990 zł</p>
<p><a href="#" class="link">Link z kolorowym i odsuniętym podkreśleniem</a></p>

p { margin: 0 0 8px; font-size: 18px; }
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e91e63;
}
.crossed { text-decoration: line-through; color: #888; }
.link {
  color: #0088d1;
  text-decoration-color: #9fd8f7;
  text-underline-offset: 3px;
}
Wynik

Falista linia jak przy literówce

Pierwotna cena 990 zł

Link z kolorowym i odsuniętym podkreśleniem

Na co uważać

  • Zostaw linki w tekście podkreślone (albo odróżnione czymś innym niż kolor) – osoby z zaburzeniami widzenia barw inaczej ich nie rozpoznają. Zamiast usuwać podkreślenie, możesz je stonować kolorem i odsunięciem.
  • Właściwość nie jest dziedziczona, ale linia rysuje się przez wszystkich potomków. W podkreślonym akapicie nie usuniesz jej na span przez text-decoration: none (poza elementami inline-block i pozycjonowanymi).
  • Safari obsługuje skrót z kolorem i stylem (text-decoration: underline wavy red) bez prefiksu dopiero od wersji 26.2 (2025). Dla starszych Safari zapisz osobne właściwości text-decoration-line, -style i -color (od Safari 12.1) jak w przykładzie.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
text-underline-offset
text-decoration-thickness
color
:link i :visited