Текст-украшение-строка - CSS-хитрости

Anonim

text-decoration-lineСвойство украшает текст с подчеркиванием, Оверлайн, линейными сквозными, или комбинацией этих линий.

p ( text-decoration-line: underline; )

Значения

  • none: никакая строка не добавляется, и все существующие строки удаляются - например, noneудаляет подчеркивание по умолчанию для ссылок.
  • underline: добавляет подчеркивание 1px под текстом.
  • overline: добавляет над текстом верхнюю линию размером 1 пиксель.
  • line-through: добавляет линию через текст толщиной 1 пиксель.
  • inherit: наследует украшение родителя.

Значение blinkуказано в спецификации W3C, но оно устарело и не будет работать ни в одном текущем браузере. Когда это сработало, он заставил текст «мигать», быстро переключая его непрозрачность между 0% и 100%.

Объединение ценностей

Вы можете комбинировать underline, overlineили line-throughзначения , разделенных пробелами список , чтобы добавить несколько строк украшения:

p ( text-decoration-line: overline underline line-through; )

использование

text-decoration-lineСвойство практически идентична оригинальной text-decorationсобственности. Если все, что вы хотите сделать, это добавить строку или строки к вашему тексту, text-decorationэто лучший выбор, потому что он поддерживается всеми браузерами, даже очень старыми. Как правило, использование text-decoration-lineобъявления имеет смысл только тогда, когда вы пишете правило полного стиля, которое включает text-decoration-styleили text-decoration-colorобъявление. Если вы хотите использовать все три вместе, вы можете использовать сокращенное text-decorationсвойство.

Стенография

text-decoration-lineможет быть использован в сочетании с text-decoration-styleи text-decoration-colorв стенографии CSS3 text-decorationсобственности ( в настоящее время только Firefox полностью поддерживает это):

.underlined ( text-decoration: underline dotted red; )

Демо

Эта демонстрация будет работать в Safari, Firefox и Chrome с включенными экспериментальными функциями веб-платформы. blinkЗначение не входит.

См. Статью «Pen text-decoration-line» от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • текст-украшение
  • стиль оформления текста
  • текст-украшение-цвет
  • текст-украшение-пропустить

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

  • text-decoration-line в спецификации W3C
  • text-decoration-line в MDN

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

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

* с -webkitпрефиксом
† с включенным флагом экспериментальных функций веб-платформы
‡ 6–35 с -mozпрефиксом, без префикса с 36.