Подчеркивание текста css пунктиром: Как сделать пунктирное подчеркивание текста?

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

Свойство text-decoration-line

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

. strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

Свойство text-decoration-skip

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется. Возможные значения: objects, spaces, ink, edges и box-decoration.

Значение ink позволяет предотвратить перекрытие элементов оформления текста:

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p>
  Getting <span>Very</span> Fancy
</p>

. super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

Остальные значения пока плохо поддерживаются браузерами, а именно:

• spaces: оформление не касается пробелов и знаков препинания.
• edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

. under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

Продолжайте изучать оформление текста в CSS самостоятельно и попробуйте создать какой-нибудь причудливый стиль.

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

css — многострочный пунктирный текст с подчеркиванием

Задавать вопрос

спросил 12 лет, 3 месяца назад

Изменено 1 месяц назад

Просмотрено 57 тысяч раз

Поскольку подчеркивание текста CSS допускает только сплошную линию, а ее положение находится прямо в нижней части строк, я использую border-bottom плюс небольшой отступ, чтобы получить пунктирное или пунктирное подчеркивание текста.

 h3{border-bottom:1px с точками #999; заполнение снизу: 5px;}
 

Теперь проблема в том, что когда текст заголовка (или абзаца, или любого другого элемента) занимает 2 строки или более, пунктирное подчеркивание просто делает то же, что и каждая граница, то есть остается внизу блочного элемента. Если я использую стиль подчеркивания текста, подчеркивание остается с текстом, но подчеркивание текста поддерживает только сплошную линию и, насколько мне известно, без отступов.

Итак, как отобразить многострочный текст с пунктирным или пунктирным подчеркиванием?

Спасибо

 h3 {
  нижняя граница: 1px пунктир #999;
  дисплей: встроенный;
}
 

Итак, вы получили то, что вам нужно.
Но вы должны иметь в виду, что

 .подчеркивание-пунктир {
  декоративная линия: подчеркивание;
  стиль оформления: пунктирный;
}
 

 .underline-dash {
  строка оформления текста: подчеркивание;
  стиль оформления текста: пунктир;
} 

 Это подчеркнутый пунктиром текст. 

 a {граница-нижняя:1px пунктирная красная; }
  span.nav-ссылка { float:left; } 

 Тестовая ссылка 

 text-decoration: подчеркивание пунктиром;
оформление текста: подчеркивание пунктиром;
 

 .link-статьи
{
    нижняя граница: сплошной синий 1px;
    текстовое оформление: нет;
}
.link-статьи: hover
{
    цвет нижней границы: красный;
}
 

 .link-articles
{
    положение: родственник;
}
.link-статьи[href="#articles"]:после
{
    контент: «Мои статьи»;
}
.link-статьи: после
{
    красный цвет;
    слева: 0;
    положение: абсолютное;
    сверху: 0;
}
 

 a:hover.link-articles {нижняя граница: 1 пиксель с красной точкой; украшение текста: нет;}
 

 a:hover {
  стиль оформления текста: пунктирный
}
 

 .link-articles { text-decoration: none; нижняя граница: синяя сплошная 1px; }
.link-articles:hover {граница-нижняя: красная точка 1px; }
 

 .link-articles { text-decoration: none; нижняя граница: 1px пунктирная синяя; }
.link-articles:hover { text-decoration: none; нижняя граница: 1 пиксель с красной точкой; }
 

 .link-articles{ text-decoration: none; нижняя граница: 1px с точками; цвет границы: синий; }
 .link-статьи: hover { цвет границы: красный; }
 

 a.link-articles {
    текстовое оформление: нет;
    нижняя граница: 1px пунктирная синяя;
}
a.link-статьи: hover {
    нижняя граница: 1 пиксель с красной точкой;
}