text-decoration – Свойство позволяет подчеркивание, надчеркивание и зачеркивание текста.
Свойство имеет несколько значений:
none – Значение по умолчанию.
<p style="text-decoration: none">Текст</p>underline – Подчеркнутый текст.
<p style="text-decoration: underline">Подчеркнутый текст</p>overline – Надчеркнутый текст.
<p style="text-decoration: overline">Надчеркнутый текст</p>line-through – Зачеркнутый текст.
<p style="text-decoration: line-through">Зачеркнутый текст</p>Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подчеркивание, надчеркивание и зачеркивание текста</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
p {
font-size: 14pt;
}
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline blue 4px;
}
.blink {
text-decoration: blink;
}
</style>
</head>
<body>
<h1>Подчеркивание, надчеркивание и зачеркивание текста</h1>
<p class="under">Под этим текстом есть линия.</p>
<p class="over">Над этим текстом есть волнистая линия.</p>
<p class="line">Зачеркнутый текст.</p>
<p>Эта <a class="plain" href="#">ссылка не будет подчеркнута.</a></p>
<p class="underover">Этот текст имеет надчеркивание и подчеркивание сверху и снизу.</p>
<p class="thick">Этот текст имеет очень толстое голубое подчеркивание в поддерживающих браузерах.</p>
<p class="blink">Этот текст может мигать для вас, в зависимости от используемого вами браузера.</p>
</body>
</html>Подчеркивание, надчеркивание и зачеркивание текста
