Текст-подчеркивание-позиция - CSS-хитрости

Anonim

text-underline-positionСвойство определяет размещение подчеркивания на ссылках или по тексту с text-decoration: underline;приложенным.

a ( text-underline-position: under; )

Значения

Это значения, указанные в рекомендации кандидата уровня 3 модуля оформления текста CSS W3C:

  • auto: по умолчанию. Браузер будет выбирать между размещением подчеркивания на базовой линии текста или под ним.
  • inherit: наследует подчеркнутую позицию родительского элемента.
  • under: помещает подчеркивание под текстом с дополнительным пространством для предотвращения пересечения нижних элементов.
  • left: для режимов вертикального письма. Это поместит строку слева от текста.
  • right: для режимов вертикального письма. Это поместит строку справа от текста.

Microsoft использует другой набор значений для Internet Explorer:

  • auto: по умолчанию. Помещает подчеркивание под текстом для всех языков, кроме японского (подробности см. По ссылке MSDN в разделе «Дополнительная информация» ниже).
  • above: помещает подчеркивание над текстом. Визуально идентиченtext-decoration: overline;
  • below: помещает подчеркивание под текстом. Обратите внимание, что это отличается от under- он не очищает нижние элементы.
  • auto-posработает так же, как реализация MS auto.

Демо

На момент написания этой статьи text-underline-positionподдерживается только частично Chrome (33+ с включенными экспериментальными флагами) и Internet Explorer 6+. Chrome поддерживает auto, inheritи underзначение из W3C Candidate Recommendation, в то время как IE поддерживает свои собственные альтернативные значения.

Этот пример показывает , что underи belowзначение в браузерах , которые поддерживают их.

См. Pen text-underline-position от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • текст-украшение

Дополнительная информация

  • text-underline-position в модуле оформления текста CSS уровня 3 CR.
  • text-underline-position в MSDN.

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
33 * Никто Никто Никто 6 † Никто Никто

* с -webkitвключенными префиксом и экспериментальными флагами в chrome: // flags. leftи rightзначения не поддерживаются.
† со значениями -msпрефикса и IE.