Свойство text-decoration
Задает подчеркивание для текста сверху или снизу. Сокращенная запись, которая включает в себя свойства: text-decoration-style, text-decoration-color, text-decoration-line
text-decoration: underline;
Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
text-decoration: none;
Убирает подчеркивание текста
<style>
.example-0 {
text-decoration: none;
}
</style>
<a class="example-0" href="#">Ссылка</a>
text-decoration: underline;
Нижнее подчеркивание текста
<style>
.example-1 {
text-decoration: underline;
}
</style>
<h2 class="example-1">Lorem ipsum dolor sit amet.</h2>
Lorem ipsum dolor sit amet.
text-decoration: overline;
Верхнее подчеркивание текста
<style>
.example-2 {
text-decoration: overline;
}
</style>
<h2 class="example-2">Lorem ipsum dolor sit amet.</h2>
Lorem ipsum dolor sit amet.
text-decoration: line-through;
Зачеркнутый текст
<style>
.example-3 {
text-decoration: line-through;
}
</style>
<h2 class="example-3">Lorem ipsum dolor sit amet.</h2>
Lorem ipsum dolor sit amet.
text-decoration: underline overline;
Подчеркивание текста снизу и сверху
<style>
.example-4 {
text-decoration: underline overline;
}
</style>
<h2 class="example-4">Lorem ipsum dolor sit amet.</h2>
Lorem ipsum dolor sit amet.
text-decoration: dashed underline;
Подчеркнутый текст снизу пунктирной линией. Возможные значения для стилизации линии: dashed, wavy, dotted, double, solid
<style>
.example-5 {
text-decoration: dashed underline;
}
</style>
<h2 class="example-5">Lorem ipsum dolor sit amet.</h2>
Lorem ipsum dolor sit amet.
text-decoration: dashed underline red;
Подчеркнутый текст снизу пунктирной линией и цвет линии красный. Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.
<style>
.example-6 {
text-decoration: dashed underline red;
}
</style>
<h2 class="example-6">Lorem ipsum dolor sit amet.</h2>