IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

text-decoration-line - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti text-decoration-line nastavujeme textu čáru (např. podtržení) v HTML. Vlastnost se dědí. Tuto vlastnost podporuje pouze webový prohlížeč Mozilla Firefox!

Hodnoty

  • none (výchozí) - Normální text.
  • underline - Podtrhnutí textu.
  • overline - Čára nad textem.
  • line-through - Přeškrtnutý text.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Ke změnění barvy čáry můžeme využít vlastnosti text-decoration-color a ke změnění stylu čáry vlastnost text-decoration-style.

Ukázka

Pro ukázku si vytvoříme tři odstavce s krátkým textem a jedinečným ID. Jeden z nich bude mít nad sebou čáru, další bude přeškrtnutý a poslední bude podtržený. Všechny odstavce budou využívat vlastnosti text-decoration-line.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                #nad
                {
                        -moz-text-decoration-line: overline;        /* Mozilla Firefox */
                        text-decoration-line: overline;
                }
                #pres
                {
                        -moz-text-decoration-line: line-through;    /* Mozilla Firefox */
                        text-decoration-line: line-through;
                }
                #pod
                {
                        -moz-text-decoration-line: underline;       /* Mozilla Firefox */
                        text-decoration-line: underline;
                }
                </style>
                <title>text-decoration-line</title>
        </head>
        <body>
                <p id="nad">Tento text má čáru nad sebou.</p>
                <p id="pres">Tento text je přeškrtnutý.</p>
                <p id="pod">Tento text je podtrhnut.</p>
        </body>
</html>

Výsledek:

Vlastnost text-decoration-line v CSS 3 - Text a písmo - CSS vlastnosti

Poznámka

Jelikož tato vlastnost je podporována pouze webovým prohlížečem Mozilla Firefox, v ostatních prohlížečích nebude text nijak upraven. Naštěstí místo této vlastnosti můžeme využít atribut text-decoration, který nabízí podobnou funkcionalitu, ovšem bez možnosti obarvení a úpravy.


 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity