Szöveg-dekoráció-sor - CSS-trükkök

Anonim

A text-decoration-linetulajdonság aláhúzással, áthúzással, áthúzással vagy e sorok kombinációjával díszíti a szöveget.

p ( text-decoration-line: underline; )

Értékek

  • none: nem ad hozzá sort, és a meglévő sorokat eltávolítja - például noneeltávolítja a hivatkozások alapértelmezett aláhúzását.
  • underline: 1px aláhúzást ad a szöveg alá.
  • overline: 1px átfedést ad a szöveg fölé.
  • line-through: 1px sort ad hozzá a szöveghez.
  • inherit: örökli a szülő dekorációját.

Az érték blinka W3C specifikációban van, de elavult, és egyetlen jelenlegi böngészőben sem fog működni. Amikor működött, a szöveg úgy tűnik, hogy „villog”, ha gyorsan átkapcsolja 0% és 100% átlátszatlanság között.

Értékek kombinálása

Kombinálhatja a underline, overlinevagy az line-throughértékeket egy szóközzel elválasztott listában, hogy több díszítési sort adjon hozzá:

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

Használat

Az text-decoration-lineingatlan gyakorlatilag megegyezik az eredeti text-decorationtulajdonsággal. Ha csak annyit szeretne tenni, hogy hozzáad egy sort vagy sorokat a szövegéhez, text-decorationakkor jobb választás, mert minden böngésző támogatja, még a nagyon régiek is. Általában a text-decoration-linedeklaráció használatának csak akkor van értelme, ha olyan hosszúkézi stílusú szabályt írsz, text-decoration-styleamely text-decoration-colordeklarációt vagy deklarációt tartalmaz. Ha mindhármat együtt szeretné használni, használhatja a gyorsírás text-decorationtulajdonságot.

Gyorsírás

text-decoration-linehasználható a rövidített CSS3 tulajdonsággal együtt text-decoration-styleés text-decoration-colora rövidítésben text-decoration(ezt jelenleg csak a Firefox támogatja teljes mértékben):

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

Demó

Ez a bemutató a Safari, a Firefox és a Chrome böngészőben fog működni, engedélyezve a kísérleti webes platform funkcióit. Az blinkértéket nem tartalmazza.

Lásd a CSS-Tricks (@ css-tricks) Toll szövegdekorációs sorát a CodePen-en.

Összefüggő

  • szövegdíszítés
  • szöveg-dekoráció-stílus
  • szöveg-dekoráció-szín
  • szöveg-dekoráció-ugrás

Több információ

  • text-decoration-line a W3C specifikációjában
  • text-decoration-line az MDN-nél

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
31 * † 7,1 * 6 ‡ Egyik sem Egyik sem Egyik sem 8 *

* -webkitelőtaggal
† kísérleti webplatform funkciókkal, zászló engedélyezve
‡ 6 - 35 -mozelőtaggal, előtag nélkül 36-tól.