Tekst-dekoration-linje - CSS-tricks

Anonim

Den text-decoration-lineegenskab dekorerer tekst med en understregning, overlinie, line-through, eller en kombination af disse linjer.

p ( text-decoration-line: underline; )

Værdier

  • none: ingen linje tilføjes, og eksisterende linjer fjernes - f.eks. nonefjerner standardunderstregen på links.
  • underline: tilføjer en 1px understregning under teksten.
  • overline: tilføjer en 1px overline over teksten.
  • line-through: tilføjer en 1px linje gennem teksten.
  • inherit: arver forældrenes udsmykning.

Værdien blinker i W3C-specifikationen, men den er udfaset og fungerer ikke i nogen aktuel browser. Når det fungerede, fik det teksten til at "blinke" ved hurtigt at skifte mellem 0% og 100% opacitet.

Kombination af værdier

Du kan kombinere de underline, overlineeller line-throughværdier i et rum-adskilt liste for at tilføje flere dekoration linjer:

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

Anvendelse

Den text-decoration-lineegenskab er stort set identisk med den oprindelige text-decorationejendom. Hvis alt hvad du vil gøre er at tilføje en linje eller linjer til din tekst, text-decorationer det et bedre valg, fordi det understøttes af enhver browser, selv meget gamle. Generelt er det text-decoration-linekun fornuftigt at bruge en erklæring, når du skriver en regel for langhåndsstil, der inkluderer text-decoration-styleeller en text-decoration-colorerklæring. Hvis du vil bruge alle tre sammen, kan du bruge stenografiegenskaben text-decoration.

Stenografi

text-decoration-linekan bruges i kombination med text-decoration-styleog text-decoration-colori stenografi CSS3 text-decorationejendom (i øjeblikket understøtter kun Firefox fuldt ud dette):

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

Demo

Denne demo fungerer i Safari, Firefox og Chrome med eksperimentelle funktioner på webplatformen aktiveret. Den blinkværdi er ikke inkluderet.

Se pennens tekst-dekorationslinie af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • tekst-dekoration
  • tekst-dekoration-stil
  • tekst-dekoration-farve
  • tekst-dekoration-spring

Mere information

  • text-decoration-line i W3C-specifikationen
  • text-decoration-line ved MDN

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
31 * † 7,1 * 6 ‡ Ingen Ingen Ingen 8 *

* med -webkitpræfiks
† med eksperimentel Webplatform -funktioner flag aktiveret
‡ 6 - 35 med -mozpræfiks, upræfixeret fra 36.