text-decoration
Dodaje lub usuwa linie przy tekście: podkreślenie, przekreślenie, nadkreślenie.
- Wartość domyślna
none currentcolor solid auto- Dziedziczona
- Nie
- Animowalna
- kolor i grubość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.textDecoration = "underline"
Przykład
#.link {
text-decoration: underline;
text-decoration-color: #a78bfa;
text-underline-offset: 4px;
}
.old-price {
text-decoration: line-through;
}<p style="margin: 0 0 8px"><a class="link" href="#" style="color: #fff; text-decoration: underline; text-decoration-color: #a78bfa; text-underline-offset: 4px;">Zobacz cennik</a></p>
<p style="margin: 0"><span class="old-price" style="text-decoration: line-through; color: #737373;">49 zł</span> <strong>29 zł</strong></p>Definicja i zastosowanie
#Właściwość text-decoration to skrót dla text-decoration-line (rodzaj linii), text-decoration-style (styl), text-decoration-color (kolor) i text-decoration-thickness (grubość). Możesz więc napisać na przykład underline wavy #f43f5e.
Najczęściej używa się jej do linków: text-decoration: none usuwa domyślne podkreślenie, a w stanie :hover można je przywrócić. Z kolei line-through przekreśla tekst, na przykład starą cenę albo wykonane zadanie.
Odstęp podkreślenia od tekstu ustawisz osobną właściwością text-underline-offset, co pozwala tworzyć eleganckie, nieprzyklejone do liter podkreślenia.
Składnia
#text-decoration: <rodzaj linii> || <styl> || <kolor> || <grubość>;Wartości
#- Tekst bez żadnych linii.
- Linia pod tekstem, jak w linkach.
- Linia przez środek tekstu.
- Linia nad tekstem.
- Falista, kolorowa linia, jak przy błędzie pisowni.
- Gruba, kolorowa linia.
Wartości w praktyce
#none
.demo { text-decoration: none; }underline
.demo { text-decoration: underline; }line-through
.demo { text-decoration: line-through; }overline
.demo { text-decoration: overline; }underline wavy #f43f5e
.demo { text-decoration: underline wavy #f43f5e; }underline 3px #a78bfa
.demo { text-decoration: underline 3px #a78bfa; text-underline-offset: 4px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie usuwaj podkreślenia linków w tekście ciągłym. Dla wielu osób to główny sygnał, że da się w coś kliknąć.
text-underline-offsetodsuwa podkreślenie od liter, więc nie przecina ogonków takich znaków jak ą, ę czy g.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.