Tekst-understrek-posisjon - CSS-triks

Anonim

Den text-underline-positioneiendom komplekser plassering av understreking på linker eller tekst med text-decoration: underline;anvendt.

a ( text-underline-position: under; )

Verdier

Dette er verdiene som er spesifisert i W3C CSS Text Decoration Module Level 3 Kandidatanbefaling:

  • auto: Standaren. Nettleseren vil bestemme mellom å plassere understrekningen ved tekstens grunnlinje eller under den.
  • inherit: arver foreldrenes understrekningsposisjon.
  • under: plasserer understrekningen under teksten med ekstra plass for å forhindre kryssing av nedstigende.
  • left: for vertikale skrivemodi. Dette plasserer linjen til venstre for teksten.
  • right: for vertikale skrivemodi. Dette plasserer linjen til høyre for teksten.

Microsoft bruker et annet sett med verdier for Internet Explorer:

  • auto: Standaren. Plasser understrekningen under teksten for alle språk unntatt japansk (se MSDN-lenken i delen "Mer informasjon" nedenfor for detaljer).
  • above: plasserer understrekningen over teksten. Visuelt identisk medtext-decoration: overline;
  • below: plasserer understrekningen under teksten. Merk at dette er forskjellig fra under- det vil ikke fjerne etterkommere.
  • auto-posfungerer det samme som MS implementering av auto.

Demo

I skrivende stund text-underline-positionstøttes det bare delvis av Chrome (33+ med eksperimentelle flagg aktivert) og Internet Explorer 6+. Chrome støtter auto, inheritog underverdier fra W3C kandidat anbefaling, mens IE støtter sine egne alternative verdier.

Denne demoen viser underog belowverdiene i nettleserne som støtter dem.

Se pennens tekst-understreket posisjon av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

  • tekstdekorasjon

Mer informasjon

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

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
33 * Ingen Ingen Ingen 6 † Ingen Ingen

* med -webkitprefiks og eksperimentelle flagg aktivert i krom: // flagg. leftog rightverdier støttes ikke.
† med -msprefiks og IE-spesifikke verdier.