Tekst-understregning-position - CSS-tricks

Anonim

Den text-underline-positionegenskab indstiller placeringen af understregningen på links eller på tekst med text-decoration: underline;anvendt.

a ( text-underline-position: under; )

Værdier

Dette er de værdier, der er specificeret i W3C CSS Tekstdekorationsmodul Niveau 3 Kandidatanbefaling:

  • auto: standard. Browseren vælger mellem at placere understregningen ved tekstens basislinje eller under den.
  • inherit: arver forældrenes understregningsposition.
  • under: placerer understregningen under teksten med ekstra plads for at forhindre krydsning af nedstigninger.
  • left: til lodrette skrivetilstande. Dette placerer linjen til venstre for teksten.
  • right: til lodrette skrivetilstande. Dette placerer linjen til højre for teksten.

Microsoft bruger et andet sæt værdier til Internet Explorer:

  • auto: standard. Placerer understregningen under teksten for alle sprog undtagen japansk (se MSDN-linket i afsnittet "Flere oplysninger" nedenfor for detaljer).
  • above: placerer understregningen over teksten. Visuelt identisk medtext-decoration: overline;
  • below: placerer understregningen under teksten. Bemærk, at dette er forskelligt fra under- det rydder ikke efterkommere.
  • auto-posfungerer det samme som MS implementeringen af auto.

Demo

På tidspunktet for denne skrivning text-underline-positionunderstøttes kun delvist af Chrome (33+ med eksperimentelle flag aktiveret) og Internet Explorer 6+. Chrome understøtter de auto, inheritog underværdier fra W3C kandidat anbefaling, mens IE understøtter sin egen alternative værdier.

Denne demo viser underog belowværdierne i de browsere, der understøtter dem.

Se pennens tekst-understregningsposition af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • tekst-dekoration

Mere information

  • text-underline-position i CSS-tekstdekorationsmodul niveau 3 CR.
  • text-underline-position ved MSDN.

Browsersupport

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

* med -webkitpræfiks og eksperimentelle flag aktiveret i krom: // flag. leftog rightværdier understøttes ikke.
† med -mspræfiks og IE-specifikke værdier.