Текст-підкреслення-положення - CSS-хитрощі

Anonim

text-underline-positionВластивість визначає розміщення підкреслення на посиланнях або по тексту з text-decoration: underline;доданим.

a ( text-underline-position: under; )

Цінності

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

  • 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, тоді як IE підтримує власні альтернативні значення.

Ця демонстрація показує значення underта belowзначення у браузерах, які їх підтримують.

Див. Положення тексту підкреслення пера за допомогою CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • текст-прикраса

Більше інформації

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

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
33 * Жоден Жоден Жоден 6 † Жоден Жоден

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