Text-understrykning-position - CSS-tricks

Anonim

Den text-underline-positionegenskapen anger placeringen av understrykning på länkar eller text med text-decoration: underline;tillämpad.

a ( text-underline-position: under; )

Värden

Dessa är värdena som anges i W3C CSS Text Decoration Module Level 3 Kandidatrekommendation:

  • auto: standarden. Webbläsaren bestämmer mellan att placera understrykningen vid textens baslinje eller under den.
  • inherit: ärver den överordnade positionen för föräldern.
  • under: placerar understrykningen under texten med extra utrymme för att förhindra att korsningen går ned.
  • left: för vertikala skrivlägen. Detta placerar raden till vänster om texten.
  • right: för vertikala skrivlägen. Detta placerar raden till höger om texten.

Microsoft använder en annan uppsättning värden för Internet Explorer:

  • auto: standarden. Placerar understrykningen under texten för alla språk utom japanska (se MSDN-länken i avsnittet "Mer information" nedan för mer information).
  • above: placerar understrykningen ovanför texten. Visuellt identisk medtext-decoration: overline;
  • below: placerar understrykningen under texten. Observera att detta skiljer sig från under- det raderar inte nedstigningar.
  • auto-posfungerar på samma sätt som MS-implementeringen av auto.

Demo

När detta skrivs text-underline-positionstöds endast delvis av Chrome (33+ med experimentella flaggor aktiverade) och Internet Explorer 6+. Chrome stöder auto, inheritoch undervärdena från W3C-kandidatrekommendationen, medan IE stöder sina egna alternativa värden.

Denna demo visar underoch belowvärdena i webbläsarna som stöder dem.

Se pennan text-understrykningsposition av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • text-dekoration

Mer information

  • text-underline-position i CSS Text Decoration Module Level 3 CR.
  • text-underline-position vid MSDN.

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
33 * Ingen Ingen Ingen 6 † Ingen Ingen

* med -webkitprefix och experimentella flaggor aktiverade i krom: // flaggor. leftoch rightvärden stöds inte.
† med -msprefix och IE-specifika värden.