Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Css нижнее подчеркивание текста: Подчеркивание в CSS (красивые эффекты с примерами кода)

Содержание

text-decoration-color — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется

Кратко

Секция статьи «Кратко»

Свойство text-decoration-color определяет цвет декоративной линии (подчёркивания, зачёркивания и других), заданной при помощи text-decoration-line.

Кстати, декоративные линии можно интересно стилизовать при помощи text-decoration-style 😎

Пример

Секция статьи «Пример»

Зададим для слов, обозначающих цвет в тексте, двойное нижнее подчёркивание, и разукрасим линии в нужные цвета:

span {  text-decoration-line: underline;  text-decoration-style: double;}.red {  text-decoration-color: red;}.yellow {  text-decoration-color: yellow;}.white {  text-decoration-color: white;}
          span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
. red {
  text-decoration-color: red;
}
.yellow {
  text-decoration-color: yellow;
}
.white {
  text-decoration-color: white;
}
Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

Значение text-decoration-color по умолчанию — currentColor, то есть цвет такой же, что и у текста.

body {  color: #735184;}span {  text-decoration-line: underline;  text-decoration-style: double;}
          body {
  color: #735184;
}
span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
Открыть демо в новой вкладке

В примере выше цвет двойного подчёркивания серобуромалиновый, поскольку для самого текста задан этот цвет, а значит и currentColor для text-decoration-color будет значиться серобуромалиновым.

Это можно легко поменять: text-decoration-color принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff.

Раскрасить можно не только text-decoration-line, но и линии, обозначенные в HTML-разметке тегами, например <u> или <del>. У text-decoration-color

краски хватит на всех!

del {  text-decoration-color: orange;}
          del {
  text-decoration-color: orange;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-decoration

alt + ←

→

text-decoration-line

alt + →

как сделать что бы в горизонтальном меню было нижнее подчёркивание? css/html

Статус
В этой теме нельзя размещать новые ответы.
Cheat_by_APiM
Cheat_by_APiM