Свойство 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>

Lorem ipsum dolor sit amet.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии