Tekstdekorasjon - CSS-triks

Anonim

Den text-decorationegenskapen gir en understreking, overlinje, linje gjennom, eller en kombinasjon av linjer til den valgte tekst.

h3 ( text-decoration: underline; )

Verdier

  • none: ingen strek er tegnet, og eksisterende dekor blir fjernet.
  • underline: tegner en 1px-linje over teksten ved grunnlinjen.
  • line-through: tegner en 1px-linje over teksten ved "midtpunktet".
  • overline: tegner en 1px-linje over teksten, rett over "topp" -punktet.
  • inherit: arver foreldrenes dekorasjon.

Den blinkverdien er i W3C spec, men det er foreldet og vil ikke fungere i alle nåværende nettleser. Når det fungerte, fikk det teksten til å "blinke" ved raskt å veksle mellom 0% og 100% opasitet.

Demo

Se pennen CSS-triks: tekstdekorasjon av CSS-triks (@ css-triks) på CodePen.

Bruksanvisninger

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

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

Som standard arver linjen eller linjene fargen på teksten som angitt av coloregenskapen. Du kan endre dette i nettlesere som støtter text-decoration-coloreiendommen eller den treverdige stenografiske eiendommen.

text-decoration som en stenografisk eiendom

text-decorationkan brukes i kombinasjon med text-decoration-styleog text-decoration-colorsom en stenografisk eiendom:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Foreløpig støtter bare Firefox dette uprefiksede. Safari støtter det med -webkitprefikset. Chrome trenger også -webkitprefikset og eksperimentelle nettplattformfunksjoner aktivert i Chrome-flagg.

I slekt

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Mer informasjon

  • tekstdekorasjon som en stenografisk eiendom i W3C-spesifikasjonen CSS Text Decoration Module Level 3 CR
  • tekstdekorasjon på MDN

Nettleserstøtte

Alle nettlesere støtter CSS2.1 "longhand" -egenskapen text-decoration. Forkortelsen egenskapen og de underegenskaper text-decoration-color, text-decoration-lineog text-decoration-styleer støttet uten prefiks i Firefox, og med -webkitprefikset i Safari. Chrome vil også gjenkjenne disse verdiene med -webkitprefikset og eksperimentelle webplattformer-flagget aktivert.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
91 87 Nei 88 TP

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

* text-decorationfullt støttet, underegenskaper støttet med -webkitprefiks.
† underegenskaper krever i tillegg eksperimentell webplattformfunksjoner flagg aktivert.
‡ Bare CSS2.1 text-decoration; underegenskaper støttes ikke.