Tekst-dekoration - CSS-tricks

Anonim

Den text-decorationegenskab tilføjer en understregning, overlinie, line-through, eller en kombination af linjer til valgt tekst.

h3 ( text-decoration: underline; )

Værdier

  • none: ingen linje er tegnet, og enhver eksisterende dekoration fjernes.
  • underline: tegner en 1px-linje over teksten ved baseline.
  • line-through: tegner en linje med 1 pixel over teksten ved dets "midterste" punkt.
  • overline: tegner en linje med 1 pixel over teksten, direkte over dens "øverste" punkt.
  • inherit: arver udsmykningen af ​​forældrene.

Den blinkværdi i W3C spec, men det er forældet og vil ikke arbejde i enhver nuværende browser. Når det fungerede, fik det teksten til at "blinke" ved hurtigt at skifte mellem 0% og 100% opacitet.

Demo

Se pennen CSS-Tricks: Tekstdekoration af CSS-Tricks (@ css-tricks) på CodePen.

Brugsanvisninger

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

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

Som standard arver linjen eller linjerne farven på teksten som angivet af dens coloregenskab. Du kan ændre dette i browsere, der understøtter text-decoration-colorejendommen eller ejendommen med tre værdier.

text-decoration som en stenografisk ejendom

text-decorationkan bruges i kombination med text-decoration-styleog text-decoration-colorsom en stenografisk egenskab:

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

I øjeblikket understøtter kun Firefox dette ikke-prefixede. Safari understøtter det med -webkitpræfikset. Chrome har også brug for -webkitpræfikset og eksperimentelle webplatformfunktioner aktiveret i Chrome-flag.

Relaterede

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

Mere information

  • tekstdekoration som en stenografisk egenskab i W3C-specifikationen CSS Text Decoration Module Level 3 CR
  • tekst-dekoration på MDN

Browsersupport

Alle browsere understøtter CSS2.1 "longhand" ejendommen text-decoration. Den stenografi ejendom og sub-egenskaber text-decoration-color, text-decoration-lineog text-decoration-styleer understøttet uden præfiks i Firefox, og med -webkitpræfikset i Safari. Chrome genkender også disse værdier med -webkitpræfikset og eksperimentel webplatformsflag aktiveret.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
91 87 Ingen 88 TP

Mobil / tablet

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

* text-decorationfuldt understøttet, underegenskaber understøttet med -webkitpræfiks.
† underegenskaber kræver desuden, at eksperimentel webplatformsfunktioner er aktiveret.
‡ text-decorationkun CSS2.1 ; underegenskaber understøttes ikke.