Tekst-dekorasjon-linje - CSS-triks

Anonim

Den text-decoration-lineegenskap dekorerer tekst med en understrekning, overlinje, linje gjennom, eller en kombinasjon av disse linjene.

p ( text-decoration-line: underline; )

Verdier

  • none: ingen linje er lagt til, og eksisterende linjer fjernes - for eksempel nonefjerner standard understreking på lenker.
  • underline: legger til en 1px understrekning under teksten.
  • overline: legger til en 1 piks overlinje over teksten.
  • line-through: legger til en 1px linje gjennom teksten.
  • inherit: arver foreldrenes dekorasjon.

Verdien blinker i W3C-spesifikasjonen, men den er utfaset og fungerer ikke i noen nåværende nettleser. Når det fungerte, fikk det teksten til å "blinke" ved raskt å veksle mellom 0% og 100% opasitet.

Kombinere verdier

Du kan kombinere underline, overlineeller line-throughverdier i et space-separert liste å legge til flere dekorasjon linjene:

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

Bruk

Den text-decoration-lineegenskapen er praktisk talt identisk med den opprinnelige text-decorationegenskapen. Hvis alt du vil gjøre er å legge til en linje eller linjer i teksten din, text-decorationer det et bedre valg fordi den støttes av alle nettlesere, til og med veldig gamle. Generelt sett er det text-decoration-linebare fornuftig å bruke en erklæring når du skriver en langhåndsstilregel som inkluderer text-decoration-styleeller en text-decoration-colorerklæring. Hvis du vil bruke alle tre sammen, kan du bruke stenografi- text-decorationeiendommen.

Forkortelse

text-decoration-linekan brukes i kombinasjon med text-decoration-styleog text-decoration-colori stenografi CSS3- text-decorationegenskapen (for øyeblikket støtter bare Firefox dette fullt ut):

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

Demo

Denne demoen fungerer i Safari, Firefox og Chrome med eksperimentelle nettplattformfunksjoner aktivert. Den blinkverdien er ikke inkludert.

Se pennens tekstdekorasjonslinje av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

  • tekstdekorasjon
  • tekst-dekorasjon-stil
  • tekst-dekor-farge
  • tekst-dekorasjon-hopp

Mer informasjon

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

Nettleserstøtte

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

* med -webkitprefiks
† med eksperimentell Web Platform funksjoner flagg aktivert
‡ 6 - 35 med -mozprefiks, unprefixed fra og med 36.