Řádek textové dekorace - Triky CSS

Anonim

text-decoration-lineVlastnost zdobí znění s podtržením, overline, line-through, nebo kombinací těchto linek.

p ( text-decoration-line: underline; )

Hodnoty

  • none: není přidán žádný řádek a všechny existující řádky jsou odstraněny - například noneodstraní výchozí podtržení u odkazů.
  • underline: přidá pod text podtržení 1px.
  • overline: přidá nad text čáru 1px.
  • line-through: přidá do textu 1px čáru.
  • inherit: zdědí výzdobu rodiče.

Hodnota blinkje ve specifikaci W3C, ale je zastaralá a nebude fungovat v žádném aktuálním prohlížeči. Když to fungovalo, způsobilo to, že text „blikal“ rychlým přepínáním mezi 0% a 100% neprůhledností.

Kombinace hodnot

Můžete kombinovat underline, overlinenebo line-throughhodnoty v seznamu prostorově odděleny, aby se přidat více dekorace řádky:

p ( text-decoration-line: overline underline line-through; )

Používání

Tato text-decoration-linenemovitost je prakticky totožná s původní text-decorationnemovitostí. Pokud vše, co chcete udělat, je přidat do textu řádek nebo řádky, text-decorationje to lepší volba, protože to podporuje každý prohlížeč, dokonce i velmi staré. Obecně platí, že použití text-decoration-linedeklarace má smysl pouze tehdy, když píšete pravidlo stylu longhand, které obsahuje text-decoration-stylenebo text-decoration-colordeklaraci. Pokud chcete použít všechny tři dohromady, můžete použít vlastnost zkratky text-decoration.

Těsnopis

text-decoration-linemohou být použity v kombinaci s text-decoration-stylea text-decoration-colorv zkratka CSS3 text-decorationmajetku (v současné době pouze Firefox plně podporuje to):

.underlined ( text-decoration: underline dotted red; )

Ukázka

Tato ukázka bude fungovat v Safari, Firefoxu a Chrome s povolenými experimentálními funkcemi webové platformy. blinkHodnota není zahrnuta.

Podívejte se na textovou výzdobu pera od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • textová výzdoba
  • styl dekorace textu
  • barva textové dekorace
  • přeskočení textové dekorace

Více informací

  • text-decoration-line ve specifikaci W3C
  • text-decoration-line ve společnosti MDN

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
31 * † 7,1 * 6 ‡ Žádný Žádný Žádný 8 *

* s -webkitpředponou
† s povoleným příznakem experimentálních funkcí webové platformy
‡ 6 - 35 s -mozpředponou, bez předpony od 36.