Для оформление подчеркивание существует несколько методов, это делается для ключевых слов, чтоб как можно больше их заметили. Вероятно вы уже встречали свойство text-decoration, которое отвечает за подчеркивание. Но по стилистике есть много разных версий, которые можно использовать в CSS сайта. Что изначально по умолчанию на интернет ресурсе при помощи этого свойства, что будет осуществлять подчеркивание у ключевого слово, которое установлено под ссылкой.
За это отвечает "text-decoration: underline;" - что каждый веб-разработчик аналогично может запретить или отменить его, а точнее поставить "text-decoration: none; - где после не станет появиться подчеркивание. Также при помощи данного свойства, можно осуществить различные дополнительные к нему, где будет гораздо больше возможностей для управления и оформление текста.
Можно задать несколько значений для свойства.
Например:
Код
a {
text-decoration: underline overline;
}
Где изначально можно задать цветовую гамму.
Код
a {
text-decoration-color: #191982;
}
Добавление цветовой палитры в подчеркивание, обычно реализуются при помощи свойства border, а не text-decoration. Где изначально для каждой из границ элемента можно указать индивидуальный дизайн, который будет отличатся в толщине или в гамме цвета
Как пример, это волнистое подчеркивание:
Код
a {
text-decoration-style: wavy;
}
Из за обновление браузера или поддержки, некоторые примеру могут просто не корректно показывать на вашем браузере.
HTML
Код
<span class="multiple">Несколько текстовых украшений</span>
<span class="color">Различный цвет оформления текста</span>
<span class="dashed">Пунктирный стиль оформления текста</span>
<span class="dotted">Пунктирный стиль оформления текста</span>
<span class="wavy">Волнистый стиль оформления текста</span>
CSS
Код
.multiple {
text-decoration: underline overline;
}
.color {
text-decoration-color: #3333e6;
}
.dashed {
text-decoration-style: dashed;
}
.dotted {
text-decoration-style: dotted;
}
.wavy {
text-decoration-style: wavy;
}
span {
display: block;
font-size: 32px;
margin: 18px 0;
text-align: center;
text-decoration: underline;
}
Также нужно брать внимание, что некоторые вещи могут меняться с преобразованием или обновлением CSS.
Демонстрация
