Tekst-decoratie-regel - CSS-trucs

Anonim

De text-decoration-lineeigenschap versiert tekst met een onderstreping, bovenlijn, doorlopende lijn of een combinatie van deze regels.

p ( text-decoration-line: underline; )

Waarden

  • none: er wordt geen regel toegevoegd en alle bestaande regels worden verwijderd - verwijdert bijvoorbeeld nonede standaard onderstreping op links.
  • underline: voegt een 1px onderstreping toe onder de tekst.
  • overline: voegt een 1px overline toe boven de tekst.
  • line-through: voegt een regel van 1 px toe aan de tekst.
  • inherit: erft de onderscheiding van de ouder.

De waarde blinkis in de W3C-specificatie, maar deze is verouderd en werkt niet in een huidige browser. Toen het werkte, deed het de tekst lijken te "knipperen" door deze snel te schakelen tussen 0% en 100% dekking.

Waarden combineren

U kunt de maaidorser underline, overlineof line-throughwaarden in een door spaties gescheiden lijst om meerdere decoratie regels toevoegen:

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

Gebruik

Het text-decoration-linepand is nagenoeg identiek aan het oorspronkelijke text-decorationpand. Als u alleen een regel of regels aan uw tekst wilt toevoegen, text-decorationis dit een betere keuze omdat het wordt ondersteund door elke browser, zelfs zeer oude. Over het algemeen heeft het gebruik van een text-decoration-lineverklaring alleen zin als u een stijlregel met de hand schrijft die text-decoration-styleeen text-decoration-colorverklaring of een verklaring bevat. Als u ze alle drie samen wilt gebruiken, kunt u de steno- text-decorationeigenschap gebruiken.

Steno

text-decoration-linekan worden gebruikt in combinatie met text-decoration-styleen text-decoration-colorin de steno CSS3- text-decorationeigenschap (momenteel ondersteunt alleen Firefox dit volledig):

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

Demo

Deze demo werkt in Safari, Firefox en Chrome met geactiveerde experimentele webplatformfuncties. De blinkwaarde is niet inbegrepen.

Zie de Pen text-decoration-line door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

  • tekst-decoratie
  • tekst-decoratie-stijl
  • tekst-decoratie-kleur
  • tekst-decoratie-overslaan

Meer informatie

  • text-decoration-line in de W3C-specificatie
  • text-decoration-line bij MDN

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
31 * † 7.1 * 6 ‡ Geen Geen Geen 8 *

* met -webkitvoorvoegsel
† met vlag voor experimentele Web Platform-functies ingeschakeld
‡ 6 - 35 met -mozvoorvoegsel, zonder prefix vanaf 36.