Text-dekoration-linje - CSS-tricks

Anonim

Den text-decoration-lineegenskapen dekorerar text med en understrykning, överlinje, line-genom, eller en kombination av dessa linjer.

p ( text-decoration-line: underline; )

Värden

  • none: ingen rad läggs till och alla befintliga rader tas bort - till exempel nonetar bort standardstreck på länkar.
  • underline: lägger till en 1px understrykning under texten.
  • overline: lägger till en 1px överlinje ovanför texten.
  • line-through: lägger till en 1px rad genom texten.
  • inherit: ärver dekorationen av föräldern.

Värdet blinkfinns i W3C-specifikationen, men det är utfasat och fungerar inte i någon aktuell webbläsare. När det fungerade fick det texten att "blinka" genom att snabbt växla mellan 0% och 100% opacitet.

Kombinera värden

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

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

Användande

Den text-decoration-lineegenskapen är praktiskt taget identisk med den ursprungliga text-decorationfastigheten. Om allt du vill göra är att lägga till en rad eller rader i din text, text-decorationär det ett bättre val eftersom det stöds av alla webbläsare, även mycket gamla. Generellt är det text-decoration-linebara meningsfullt att använda en deklaration när du skriver en långhandstilregel som innehåller text-decoration-styleeller en text-decoration-colordeklaration. Om du vill använda alla tre tillsammans kan du använda shorthand- text-decorationegenskapen.

Stenografi

text-decoration-linekan användas i kombination med text-decoration-styleoch text-decoration-colori den förkortade CSS3- text-decorationegenskapen (för närvarande stöder endast Firefox helt detta):

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

Demo

Denna demo fungerar i Safari, Firefox och Chrome med experimentella webbplattformsfunktioner aktiverade. Det blinkvärde ingår inte.

Se Penns text-dekorationslinje av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • text-dekoration
  • text-dekoration-stil
  • text-dekoration-färg
  • text-dekoration-hoppa över

Mer information

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

Webbläsarstöd

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

* med -webkitprefix
† med experimentell webbplattformfunktioner flagg aktiverad
‡ 6 - 35 med -mozprefix, oprefixerat från 36.