Text Decoration – Podkreślenie CSS

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>

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>