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

text-decoration-thickness

text-decoration-thickness: auto | from-font | <length> | <percentage>

Ustala grubość linii z text-decoration. Razem z text-underline-offset i kolorem linii zamienia zwykłe podkreślenie linku w wyrazisty, a przy tym czytelny element.

Wartości

auto – domyślnie: grubość wybiera przeglądarka.
from-font – grubość zalecana przez krój pisma (jeśli krój jej nie podaje, jak auto).
długość – 2px, 0.1em.
procenty – z rozmiaru pisma.

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

Przykłady

Link z grubym podkreśleniem, które po najechaniu jeszcze grubieje:

<p><a href="#" class="link">Wyróżniony link</a></p>

p { font-size: 20px; }
.link {
  color: #333;
  text-decoration-color: #ff9800;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.link:hover { text-decoration-thickness: 6px; }

Wynik

Wyróżniony link

Wynik – po najechaniu myszą

Wyróżniony link

Na co uważać

Wartości procentowe działają w pełni od Chrome 89; Chrome 87 i 88 obsługiwały tylko długości.
Grube podkreślenie może zasłonić wydłużenia dolne liter – łącz je z text-underline-offset.
Właściwość nie jest dziedziczona; ustawi ją też skrót text-decoration (underline 3px), w Safari jednak dopiero od wersji 26.2.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od marca 2021, za szeroko dostępne uznawane od września 2023. Od wersji: Chrome 87 (w pełni od 89), Firefox 70, Safari 12.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
text-decoration
text-underline-offset
:hover