Text-decoration

CSS vlastnost text-decoration určuje podtržení textu a jiné "přikrášlení".

text-decoration
hodnoty přikrášlení textu
none žádné
underline podtržení
overline nadtržení
line-through přeškrtnutí
blink blikání, nikde nefunguje, zavržená hodnota

Normálně není text nijak dekorován.

Odkazy mají výchozí dekoraci podtržení (a změnou text-decoration se dá udělat, aby podtrhané nebyly). Podtržený je i obsah tagu <ins> (což mi přijde nelogické). Na webu byste neměli podtrhávat nic, co není odkaz -- a naopak -- odkazy podtrhávejte.

Obsah tagů <s>, <strike> a <del> mají výchozí dekoraci přeškrtnutí. Pomocí text-decoration: none se jim dá přeškrtnutí zrušit. Naopak text-decoration: line-through; použijte u zrušených cen a zrušených textů (které z nějakého důvodu nechcete mazat).

Nové vlastnosti přibližně od roku 2017

Příklady

 Něco funguje v některých prohlížečích.

text-decoration-color: red;

text-decoration: underline dotted green;

text-decoration-style: wavy; text-decoration: underline;

text-decoration-skip: ink;

text-decoration-line: overline underline line-through;

text-underline-position: under;

Text-decoration-color

Určí barvu podtržení. Příklad:

text-decoration: underline;
text-decoration-color: green;

Text-decoration-style

Druh podtržení (nadtržení, přeškrtnutí).

text-decoration-style
hodnoty druh podtržení
solid plné
double dvojité
dotted tečkované
dashed čárkované
wavy vlnovka

Text-decoration-skip

Které objekty se nebudou podtrhávat a nadtrhávat. Podle mých pokusů je tato vlastnosti ignorována při přeškrtnutí (line-through). Týká se zejména prohlížeče Chrome, protože Explorer ani Firefox text-decoration-skip nepodporují.

text-decoration-skip
hodnoty co se nebude podtrhávat
none podtrhne se všechno
objects obrázky a jiné inline-block prvky
spaces mezery a bílé znaky - v Chrome nefunguje
ink inkoust: podtržení se nedotkne písmene, na chvíli se vynechá
edges něco s čínštinou, nespojí se asi podtržení sousedních znaků
box-decoration nechápu přesně, ale něco s paddingem a marginem
ink objects kombinace hodnot

Obzvlášť jsem si oblíbil hodnotu ink, tedy text-dexoration-skip: ink;. Podtržená slova jsou s ním podle mého názoru lépe čitelná.

 

Podpora

Velmi dobře podporovaná vlastnost, dobrá hlavně na podtrhávání.

Podpora vlastnosti text-decoration
Prohlížeč Základní podpora ve verzích Nové vlastnosti
Internet Explorer všechny verze nové vlastnosti nepodporuje
Firefox všechny verze neumí text-decoration: skip
Opera všechny verze od verze 44 umí vše
Chrome všechny verze od verze 57

Blikání nefunguje v žádném moderním prohlížeči (naštěstí).

Příklady

Jak udělat, aby odkazy nebyly podtržené:

<style>
a:link, a:visited {text-decoration: none}
</style>

Pokud se u odkazů vypíná podtrhávání, často se přidává pravidlo, aby při se při přejetí myší (stav :hover) podtrhly:

<style>
a:link, a:visited {text-decoration: none}
a:hover {text-decoration: underline}
</style>

Další příklady

Textové odkazy jako tlačítko

 

Poslední aktualizace 4. dubna 2017

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.