Dokumentacja CSS z przykładami: Podkreślenie

Q: Jak podkreślić tekst w CSS?

Użyj na elemencie text-decoration: underline;. Do wyglądu linii dodaj text-decoration-color, text-decoration-style, text-decoration-thickness i text-underline-offset.

Q: Jak usunąć podkreślenie z linku?

Ustaw text-decoration: none; na elemencie a. Zadbaj, żeby linki nadal się wyróżniały w inny sposób (kolor plus podkreślenie przy najechaniu lub fokusie), bo wielu czytelników rozpoznaje linki po podkreśleniu.

Q: Jak zmienić kolor podkreślenia?

Użyj text-decoration-color albo skrótu: text-decoration: underline #f59e0b;. Bez tego linia ma kolor tekstu.

Q: Jak dodać odstęp między tekstem a podkreśleniem?

Użyj text-underline-offset, na przykład text-underline-offset: 4px;. Większe wartości przesuwają linię dalej pod tekst.

Jak podkreślić tekst w CSS

text-decoration: underline rysuje linię pod tekstem. Linia ma kolor tekstu, chyba że nadasz jej inny.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

Druga linijka używa skrótu text-decoration do rodzaju linii, stylu i koloru, a potem ustawia grubość i odstęp osobnymi właściwościami. Specyfikacja pozwala też umieścić grubość w skrócie, ale Safari odrzuca wtedy całą deklarację, więc pisz text-decoration-thickness osobno.

Właściwości text-decoration

Właściwość	Wartości	Domyślnie
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (można łączyć)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	Dowolny kolor	`currentColor` (kolor tekstu)
`text-decoration-thickness`	Długość, procent, `auto`, `from-font`	`auto`
`text-underline-offset`	Długość, procent, `auto`	`auto`

text-decoration to skrót dla pierwszych czterech, ale nie umieszczaj w nim grubości: Safari ignoruje deklarację text-decoration, która ją zawiera. text-underline-offset jest osobna i trzeba ją pisać samodzielnie.

Style, kolory i grubość

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

Przesuwanie podkreślenia: text-underline-offset

Domyślnie linia leży blisko liter i omija wydłużenia dolne, takie jak g, p i y. text-underline-offset przesuwa ją niżej, co często wygląda czyściej w nagłówkach i linkach:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

Przerwy wokół wydłużeń dolnych pochodzą z text-decoration-skip-ink: auto, które jest domyślnie włączone. Ustaw none, żeby linia była ciągła.

Usuwanie podkreślenia z linków

Linki są podkreślane przez arkusz stylów przeglądarki. text-decoration: none usuwa podkreślenie. Ponieważ wielu czytelników znajduje linki po podkreśleniu, przywróć je przy najechaniu i fokusie z klawiatury, a linkowi nadaj kolor inny niż kolor tekstu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

Paski nawigacji i przyciski to rozsądne miejsce na rezygnację z podkreślenia, bo ich położenie już mówi "to link". Wewnątrz akapitu tekstu je zachowaj. Więcej o stanach linków na stronie o hover.

Nadkreślenie i przekreślenie

text-decoration-line rysuje też linię nad tekstem albo przez tekst i przyjmuje więcej niż jedną wartość:

.old-price { text-decoration: line-through; }
.both      { text-decoration-line: underline overline; }

Przekreślenie przez CSS jest tylko wizualne. Gdy tekst to usunięta treść (zmieniona cena, usunięta pozycja), oznacz go przez <s> albo <del>, jak pokazuje strona o podkreśleniu w HTML, żeby znaczenie było w strukturze, a nie tylko w stylach.

Częste błędy

Używanie <u> do podkreślania dla stylu. <u> służy do tekstu oznaczonego jako inny, na przykład błędów pisowni. Do ostylowanego podkreślenia użyj CSS.
Podkreślanie tekstu, który nie jest linkiem. Czytelnicy będą próbowali go kliknąć. Do wyróżnienia użyj pogrubienia, koloru albo tła.
Usuwanie podkreślenia linków w tekście głównym bez innej wskazówki. Sam kolor nie wystarczy czytelnikom, którzy nie widzą różnicy.
Próba usunięcia podkreślenia rodzica z poziomu dziecka. Nie da się go cofnąć od środka; zmień rodzica albo nadaj dziecku inline-block.
Oczekiwanie text-underline-offset w skrócie. To osobna właściwość.
Umieszczanie grubości w skrócie. text-decoration: underline 2px działa w Chrome i Firefoksie, ale Safari odrzuca całą deklarację. Użyj text-decoration-thickness.

Najczęściej zadawane pytania

Jak podkreślić tekst w CSS?

Użyj na elemencie text-decoration: underline;. Do wyglądu linii dodaj text-decoration-color, text-decoration-style, text-decoration-thickness i text-underline-offset.

Jak usunąć podkreślenie z linku?

Ustaw text-decoration: none; na elemencie a. Zadbaj, żeby linki nadal się wyróżniały w inny sposób (kolor plus podkreślenie przy najechaniu lub fokusie), bo wielu czytelników rozpoznaje linki po podkreśleniu.

Jak zmienić kolor podkreślenia?

Użyj text-decoration-color albo skrótu: text-decoration: underline #f59e0b;. Bez tego linia ma kolor tekstu.

Jak dodać odstęp między tekstem a podkreśleniem?

Użyj text-underline-offset, na przykład text-underline-offset: 4px;. Większe wartości przesuwają linię dalej pod tekst.

Dlaczego nie mogę usunąć podkreślenia z elementu dziecka?

Podkreślenie narysowane przez rodzica jest malowane w poprzek jego dzieci i nie da się go usunąć od środka. Usuń je na elemencie, który je ustawia, albo nadaj dziecku display: inline-block, do którego dekoracja rodzica nie dociera.

Powiązane zagadnienia