Pozice podtržení textu - Triky CSS

Anonim

Tato text-underline-positionvlastnost nastavuje umístění podtržení na odkazy nebo na text s text-decoration: underline;použitým.

a ( text-underline-position: under; )

Hodnoty

Jedná se o hodnoty uvedené v doporučení kandidáta na textový modul CSS úrovně 3 úrovně W3C:

  • auto: výchozí. Prohlížeč se rozhodne mezi umístěním podtržení na základní čáru textu nebo pod ni.
  • inherit: zdědí podtrženou pozici rodiče.
  • under: umístí podtržení pod text s extra mezerou, aby se zabránilo křížení potomků.
  • left: pro vertikální režimy psaní. Tím se umístí řádek nalevo od textu.
  • right: pro vertikální režimy psaní. Tím se umístí řádek napravo od textu.

Microsoft používá pro Internet Explorer jinou sadu hodnot:

  • auto: výchozí. Umístí pod text podtržení pro všechny jazyky kromě japonštiny (podrobnosti viz odkaz MSDN v části „Další informace“ níže).
  • above: umístí podtržení nad text. Vizuálně identické stext-decoration: overline;
  • below: umístí podtržení pod text. Všimněte si, že se to liší od under- nevymaže potomky.
  • auto-posfunguje stejně jako implementace MS v MS auto.

Ukázka

V době psaní tohoto článku text-underline-positionje prohlížeč Chrome (33+ se zapnutými experimentálními příznaky) a Internet Explorer 6+ podporován pouze částečně. Chrome podporuje auto, inherita underhodnoty z doporučení W3C kandidátní, zatímco IE podporuje své vlastní alternativní hodnoty.

Tato ukázka zobrazuje hodnoty undera belowv prohlížečích, které je podporují.

Podívejte se na Pen-text-underline-position od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • textová výzdoba

Více informací

  • text-underline-position v modulu CSS Text Decoration Level 3 CR.
  • text-underline-position na MSDN.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
33 * Žádný Žádný Žádný 6 † Žádný Žádný

* s -webkitpředponou a experimentálními příznaky povolenými v chrome: // flags. lefta righthodnoty nejsou podporovány.
† s -mspředponou a hodnotami specifickými pro IE.