Tekst-decoratie - CSS-trucs

Anonim

De text-decorationeigenschap voegt een onderstreping, bovenlijn, doorlopende lijn of een combinatie van regels toe aan geselecteerde tekst.

h3 ( text-decoration: underline; )

Waarden

  • none: er wordt geen lijn getrokken en alle bestaande versieringen worden verwijderd.
  • underline: tekent een lijn van 1 px over de tekst aan de basislijn.
  • line-through: tekent een lijn van 1 px over de tekst op het "middelste" punt.
  • overline: tekent een lijn van 1 px over de tekst, direct boven het "bovenste" punt.
  • inherit: erft de onderscheiding van de ouder.

De blinkwaarde is 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.

Demo

Zie de Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-tricks) op CodePen.

Gebruiksopmerkingen

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

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

Standaard erven de lijn of lijnen de kleur van de tekst zoals ingesteld door de coloreigenschap. U kunt dit wijzigen in browsers die de text-decoration-coloreigenschap of de steno-eigenschap met drie waarden ondersteunen.

text-decoration als een steno-eigendom

text-decorationkan worden gebruikt in combinatie met text-decoration-styleen text-decoration-colorals steno-eigenschap:

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

Momenteel ondersteunt alleen Firefox dit unprefixed. Safari ondersteunt het met het -webkitvoorvoegsel. Chrome heeft ook het -webkitvoorvoegsel en de experimentele webplatformfuncties nodig die zijn ingeschakeld in Chrome-vlaggen.

Verwant

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

Meer informatie

  • text-decoration als een steno-eigenschap in de W3C spec CSS Text Decoration Module Level 3 CR
  • text-decoration bij MDN

Browser-ondersteuning

Alle browsers ondersteunen de CSS2.1 "longhand" -eigenschap text-decoration. De steno-eigenschap en de sub-eigenschappen text-decoration-color, text-decoration-lineen text-decoration-styleworden zonder -webkitprefix ondersteund in Firefox en met het voorvoegsel in Safari. Chrome herkent die waarden ook met het -webkitvoorvoegsel en de vlag voor Experimental Web Platforms ingeschakeld.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
91 87 Nee 88 TP

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

​ † subeigenschappen vereisen bovendien dat de vlag voor experimentele webplatformfuncties is ingeschakeld. ‡ alleen CSS2.1 ; sub-eigenschappen niet ondersteund.text-decoration-webkit

text-decoration