Text-dekoration - CSS-tricks

Anonim

Den text-decorationegenskapen adderar en understrykning, överlinje, line-genom, eller en kombination av linjer till markerad text.

h3 ( text-decoration: underline; )

Värden

  • none: ingen linje dras och någon befintlig dekor tas bort.
  • underline: drar en 1px-linje över texten vid baslinjen.
  • line-through: drar en 1px-linje över texten vid dess "mittpunkt".
  • overline: drar en 1px-linje över texten, direkt ovanför "topp" -punkten.
  • inherit: ärver dekorationen av föräldern.

Det blinkvärdet är i W3C spec, men det är föråldrat och fungerar inte i någon nuvarande webbläsare. När det fungerade fick det texten att "blinka" genom att snabbt växla mellan 0% och 100% opacitet.

Demo

Se pennan CSS-Tricks: Text Decoration av CSS-Tricks (@ css-tricks) på CodePen.

Användningsanmärkningar

Du kan kombinera underline, overlineeller line-throughvärden i ett utrymme separerad lista för att lägga till flera dekorationslinjer:

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

Som standard ärver raden eller raderna färgen på texten enligt colorinställningen. Du kan ändra detta i webbläsare som stöder text-decoration-coloregenskapen eller stenvärderingsegenskapen med tre värden.

text-decoration som en stenografisk egendom

text-decorationkan användas i kombination med text-decoration-styleoch text-decoration-colorsom en förkortningsegenskap:

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

För närvarande stöder endast Firefox detta oprefixade. Safari stöder det med -webkitprefixet. Chrome behöver också -webkitprefixet och experimentella webbplattformsfunktioner aktiverade i Chrome-flaggor.

Relaterad

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

Mer information

  • textdekoration som en förkortningsegenskap i W3C-specifikationen CSS Text Decoration Module Level 3 CR
  • text-dekoration på MDN

Webbläsarstöd

Alla webbläsare stöder CSS2.1 "longhand" -egenskapen text-decoration. Den stenografi egendom och under egenskaper text-decoration-color, text-decoration-lineoch text-decoration-stylestöds utan prefix i Firefox, och med -webkitprefixet i Safari. Chrome kommer också att känna igen dessa värden med -webkitprefixet och Experimental Web Platforms-flaggan aktiverad.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
91 87 Nej 88 TP

Mobil / surfplatta

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

* text-decorationfullt stöd, underegenskaper stöds med -webkitprefix.
† underegenskaper kräver dessutom att experimentella webbplattformsfunktioner är aktiverade.
‡ text-decorationendast CSS2.1 ; underegenskaper stöds inte.