Własność CSS text-underline-position

Własność CSS text-underline-position określa położenie linii podkreślenia tekstu oraz określa jej położenie wyjściowe, do którego odnosi się ustawienie własności text-underline-offset.

Wartości i składnia

Własność text-underline-position przyjmuje następujące wartości:

auto

Położenie linii podkreślenia jest automatycznie wybierane przez przeglądarkę.

from-font

Położenie linii podkreślenia jest ustalane na podstawie wartości z metryki fontu. Jeśli w metryce fontu nie ma takiej wartości, położenie linii podkreślenia jest automatycznie wybierane przez przeglądarkę.

under

Linia podkreślenia zostaje umieszczona pod tekstem, najczęściej poniżej wydłużeń dolnych.

left

W piśmie pionowym to słowo kluczowe umieszcza linię podkreślenia po lewej stronie tekstu. W piśmie poziomym (takim jak polskie) działa tak samo, jak auto.

right

W piśmie pionowym to słowo kluczowe umieszcza linię podkreślenia po prawej stronie tekstu. W piśmie poziomym (takim jak polskie) działa tak samo, jak auto.

Różnica między wartościami auto i under

Wydłużenia dolne to wszystkie „wystające” w dół części znaków, takie jak dolny „ogonek” małej litery p czy j itd. Wartość auto może umieścić linię podkreślenia w takim miejscu, że przetnie ona te elementy. Natomiast wartość under umieści ją poniżej nich. Spójrz na poniższy przykład:

.a {
  text-decoration: underline;
  text-underline-position: auto;
}
.b {
  text-decoration: underline;
  text-underline-position: under;
}

Efekt:

Podsumowanie