Tekst-onderstrepen-positie - CSS-trucs

Anonim

De text-underline-positioneigenschap bepaalt de plaatsing van de onderstreping op links of op tekst met text-decoration: underline;toegepast.

a ( text-underline-position: under; )

Waarden

Dit zijn de waarden gespecificeerd in de W3C CSS Text Decoration Module Level 3 Candidate Recommendation:

  • auto: de standaard. De browser zal beslissen tussen het plaatsen van de onderstreping op de basislijn van de tekst of eronder.
  • inherit: erft de onderstreepte positie van de ouder.
  • under: plaatst de onderstreping onder de tekst met extra ruimte om kruisende afstammelingen te voorkomen.
  • left: voor verticale schrijfmodi. Dit plaatst de regel links van de tekst.
  • right: voor verticale schrijfmodi. Dit plaatst de regel rechts van de tekst.

Microsoft gebruikt een andere set waarden voor Internet Explorer:

  • auto: de standaard. Zet de onderstreping onder de tekst voor alle talen behalve Japans (zie de MSDN-link in het gedeelte "Meer informatie" hieronder voor details).
  • above: plaatst de onderstreping boven de tekst. Visueel identiek aantext-decoration: overline;
  • below: plaatst de onderstreping onder de tekst. Merk op dat dit anders is dan under- het zal geen afstammelingen wissen.
  • auto-poswerkt hetzelfde als de MS-implementatie van auto.

Demo

Op het moment van schrijven text-underline-positionwordt het slechts gedeeltelijk ondersteund door Chrome (33+ met experimentele vlaggen ingeschakeld) en Internet Explorer 6+. Chrome ondersteunt de auto, inheriten underwaarden van de W3C-kandidaataanbeveling, terwijl IE zijn eigen alternatieve waarden ondersteunt.

Deze demo toont het underen belowwaarden in de browsers die hen ondersteunen.

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

Verwant

  • tekst-decoratie

Meer informatie

  • text-underline-position in de CSS Text Decoration Module Level 3 CR.
  • text-underline-position bij MSDN.

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
33 * Geen Geen Geen 6 † Geen Geen

* met -webkitprefix en experimentele vlaggen ingeschakeld in chrome: // flags. leften rightwaarden die niet worden ondersteund.
† met -msprefix en IE-specifieke waarden.