Underline css style: text-decoration-color — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Подчеркивание текста в CSS

Свойство CSS text-underline-position устанавливает позицию подчеркивания, указанную в элементе.

Свойство text-underline-position используется в сочетании со свойством text-decoration-line (или сокращенным свойством text-decoration ), чтобы определить, где должна появиться строка.

Если указано слева или справа , подразумевается под .

Синтаксис

позиция подчеркивания текста: авто | [ под || [ слева | справа ] ]

Возможные значения

авто
Браузер/агент пользователя может использовать любой алгоритм для определения положения подчеркивания; однако он должен быть размещен на уровне алфавитной базовой линии или под ней.
ниже
Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает выносные элементы.
Это иногда называют «бухгалтерским» подчеркиванием. Это ниже, чем обычное «алфавитное» подчеркивание. Это значение можно комбинировать с слева или справа , если в режимах вертикального письма предпочтительна определенная сторона.
слева
Используется при представлении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).

В режимах вертикального письма подчеркивание выравнивается как для под , за исключением того, что оно всегда выравнивается по левому краю текста. Если это приводит к тому, что подчеркивание рисуется на «верхней» стороне текста, то надчеркивание также меняет стороны и рисуется на «нижней» стороне.

справа
Используется при представлении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).

В режимах вертикального письма подчеркивание выравнивается как для

под , за исключением того, что оно всегда выравнивается по правому краю текста. Если это приводит к тому, что подчеркивание рисуется на «верхней» стороне текста, то надчеркивание также меняет стороны и рисуется на «нижней» стороне.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение
авто
Применимо к
Все элементы
Унаследовано?
Да
СМИ
Визуальный
Анимируемый
№

Пример кода

Базовый CSS

Вот пример простого объявления. Объявление состоит из свойства и его значения.

text-underline-position: under;

Рабочий пример в документе HTML

Пример <стиль> ч2 { шрифт: 100 3em без засечек; оформление текста: подчеркивание; позиция подчеркивания текста: под; }

Пример

Попробуй

Спецификации CSS

  • Свойство text-underline-position определено в модуле оформления текста CSS уровня 3 (кандидатская рекомендация W3C от 1 августа 2013 г.).

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

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- . для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C рекомендует поставщикам удалять свои префиксы для свойств, достигших статуса кандидата в рекомендации.

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Стилизация подчеркивания ссылки с помощью CSS 101

Опубликовано: · Время чтения: 6 мин

HTML-ссылки по умолчанию имеют особый стиль, который позволяет пользователю понять, что это кликабельный текст. Обычно ссылки имеют синий цвет и подчеркивание, при наведении показывается курсор-указатель.

Однако ссылками могут быть и другие элементы помимо текста (изображение, кнопка и т.д.). Но в этом руководстве я расскажу о подходах к текстовым ссылкам в пользовательском стиле, чтобы показать подчеркивание. Есть три способа сделать это, используя:

  • Оформление текста
  • Граница
  • Тень коробки

Оформление текста

Первый и наиболее очевидный способ — использовать свойство text-decoration , чтобы придать ссылкам особый стиль. Свойство text-decoration — это сокращение, которое «устанавливает внешний вид декоративных линий в тексте» .

Это свойство установит text-decoration-line , text-decoration-color , text-decoration-style .

Однако он может принимать от одного до трех параметров.

 а {
  оформление текста: подчеркивание;
}

Вы можете добавить больше уникальных стилей, указав свойства цвета и стиля:

 a {
  оформление текста: подчеркивание с точками #da28e0;
}

Результат:

Щелкните здесь

Доступные стили подчеркивания:

  • сплошной;
  • двойной;
  • с точками;
  • пунктир;
  • волнистый.

Чтобы указать расстояние между подчеркиванием и текстом, используйте свойство text-underline-offset .

 а {
  смещение подчеркивания текста: 5px;
}

Результат: Щелкните здесь

text-decoration также позволяет вам установить ширину/толщину подчеркивания с помощью text-decoration-thickness 

 a {
  строка оформления текста: подчеркивание;
  толщина оформления текста: 5px;
}

Результат: Нажмите здесь

Наконец, свойство text-decoration можно анимировать. Например, вы можете скрыть подчеркивание при наведении с помощью перехода.

 а {
    text-decoration: подчеркивание сплошным цветом currentColor;
    переход: text-decoration-color .2s easy-in-out;
}
а: наведите {
  цвет оформления текста: прозрачный;
}

Результат: Щелкните здесь

Граница

Вы также можете использовать свойство border-bottom , чтобы сделать стиль подчеркивания ссылки еще более привлекательным. Но вы должны установить text-decoration От до none , чтобы избежать дублирования подчеркивания.

 а {
  текстовое оформление: нет;
  нижняя граница: пунктир 1px #da28e0;
}

Результат:

Щелкните здесь

Так же, как и в случае с text-decoration , вы можете управлять шириной, цветом и стилем подчеркивания, которые относятся только к свойству границы, например:

  • точка;
  • пунктир;
  • твердый;
  • двойной;
    • паз
  • ;
  • гребень;
    • вставка
  • ;
  • начало.

Чтобы контролировать пространство между текстом и подчеркиванием, вы можете добавить свойство padding .

 а {
  текстовое оформление: нет;
  нижняя граница: пунктир 1px #da28e0;
  нижний отступ: 5px;
}

Результат: Щелкните здесь

Чтобы сделать ваши подчеркивания уникальными и необычными, вы можете применить градиентные цвета. Граница может иметь градиентные цвета, для ее установки вы можете использовать border-image

собственность.

 а {
  текстовое оформление: нет;
  нижняя граница: сплошная 3 пикселя;
  граница-изображение: линейный градиент (45 градусов, фиолетовый, оранжевый) 1;
}

Результат: Щелкните здесь

Box shadow

Последнее свойство box-shadow . Так же, как и граница, это позволит вам контролировать ширину подчеркивания и расстояние между текстом. Текстовое оформление должно быть установлено на none .

 а {
  текстовое оформление: нет;
  box-shadow: 0 2px #da28e0;
  отступ снизу: 3px;
}

Результат: Щелкните здесь

Наряду с другими свойствами, такими как размытие и распространение, которые могут создавать причудливые светящиеся эффекты.

 а {
  текстовое оформление: нет;
  box-shadow: 0 5px 4px -3px #047cea;
}

Результат: Нажмите здесь

Удалить подчеркивание

Чтобы удалить подчеркивание из ссылки, вам нужно установить соответствующее свойство CSS на none . В некоторых случаях вам потребуется сбросить все вышеперечисленные правила на none .

Это особенно актуально для сторонних сред, таких как WordPress, поскольку разработчики тем и плагинов могут использовать один из вышеперечисленных подходов. Итак, чтобы убедиться, что вы удалили подчеркивание навсегда, вы можете установить для всех трех правил значение none :

 a {
  текстовое оформление: нет;
  граница: нет;
  тень блока: нет;
}

Заключение

В заключение, если вам нужно нечто большее, чем стиль подчеркивания по умолчанию, используйте свойства border или box-shadow .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *