Text Decoration – Podkreślenie CSS

text decoration overline line through underline kurs css css3 html html5

Dekoracja Tekstu, Podkreślenie CSS

text-decoration

Dekoracji tekstu w CSS dokonujemy za pomocą linii. Linię możemy zadeklarować za pomocą własności text-decoration (ang. dekoracja tekstu). Linie mogą znaleźć się:

  • nad tekstem (ang. overline)
  • pod tekstem (ang. underline)
  • biec przez tekst (ang. line-through), jakby skreślając go.
text-decoration: none;         /* brak dekoracji (domyślna) */
text-decoration: overline;     /* linia nad tekstem */
text-decoration: line-through; /* linia przez tekst */
text-decoration: underline;    /* linia pod tekstem (podkreślenie) */
p.overline { text-decoration: overline; }
p.line-through { text-decoration: line-through; }
p.underline { text-decoration: underline; }
<p class="overline">Linia nad</p>
<p class="line-through">Linia przez</p>
<p class="underline">Linia pod</p>

Linia nad

Linia przez

Linia pod

W poprzedniej wersji HTML do podkreśleń używano elementu html <u> (ang. underline). Jednak w nowej wersji do uzyskania podkreśleń zalecane jest stosowanie CSS.

.underline { text-decoration: underline; }
<!-- Niezalecany sposób podkreślania-->
<p>Tak kiedyś <u>podkreślano</u> wyrazy</p>

<!-- Zalecany sposób podkreślania -->
<p>Tak teraz <span class="underline">podkreślamy</span> wyrazy</p>
Tak kiedyś podkreślano wyrazy
Tak teraz podkreślamy wyrazy
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.