Pozícia podčiarknutia textu - Triky CSS

Anonim

text-underline-positionVlastnosť nastavuje umiestnenie podčiarknutím na odkazy alebo na text s text-decoration: underline;aplikovanú.

a ( text-underline-position: under; )

Hodnoty

Toto sú hodnoty uvedené v odporúčaní kandidáta na textovú výzdobu modulu WSC úrovne 3 úrovne 3:

  • auto: predvolená hodnota. Prehliadač sa rozhodne medzi umiestnením podčiarknutia na základnú čiaru textu alebo pod ňu.
  • inherit: dedí podčiarknutú pozíciu rodiča.
  • under: umiestni podčiarknutie pod text s extra medzerou, aby sa zabránilo kríženiu zostupujúcich.
  • left: pre režimy vertikálneho písania. Týmto sa umiestni riadok naľavo od textu.
  • right: pre režimy vertikálneho písania. Týmto sa umiestni riadok napravo od textu.

Microsoft používa pre Internet Explorer inú sadu hodnôt:

  • auto: predvolená hodnota. Umiestni podčiarknutie pod text pre všetky jazyky okrem japončiny (podrobnosti nájdete v odkaze MSDN v sekcii „Viac informácií“ nižšie).
  • above: umiestni podčiarknutie nad text. Vizuálne identické stext-decoration: overline;
  • below: umiestni podčiarknutie pod text. Toto sa líši od under- nevymaže potomkov.
  • auto-posfunguje rovnako ako implementácia MS v ČŠ auto.

Ukážka

V čase písania tohto článku text-underline-positionje prehliadačom Chrome (33+ a povolenými experimentálnymi príznakmi) a Internet Explorer 6+ podporovaný iba čiastočne. Chrome podporuje auto, inherita underhodnoty z odporúčaní W3C kandidátnej, zatiaľ čo IE podporuje svoje vlastné alternatívne hodnoty.

Táto ukážka zobrazuje hodnoty undera belowv prehľadávačoch, ktoré ich podporujú.

Pozrite si pozíciu podčiarknutia textu pera od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

  • textová výzdoba

Viac informácií

  • text-underline-position v module CSS Textové dekorácie úrovne 3 CR.
  • text-underline-position na MSDN.

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
33 * Žiadne Žiadne Žiadne 6 † Žiadne Žiadne

* s -webkitpredponou a experimentálnymi príznakmi povolenými v chrome: // flags. lefta righthodnoty nie sú podporované.
† s -mspredponou a hodnotami špecifickými pre IE.