Войти
Регистрация

Подчеркивание и зачеркивание текста в CSS

Подчеркивание и зачеркивание текста в CSS

Здравствуйте, дорогие друзья!

Сегодня часто можно встретить на некоторых сайтах форматирование текста путем зачеркивания, обычно я это замечал в интернет-магазинах, когда зачеркивают старую цену и пишут новую. Либо Вы хотите в своей статье зачеркнуть ошибку и исправить ее наглядно, показав верный вариант написания, как в школе. Применений много.

Второй момент это подчеркивание текста, также будет уместно, чтобы выделить важные моменты в статье.

Испытуемым в данной статье у нас будет абзац с тегом <p>

<p>Абзац с текстом</p>

За данное форматирование текста отвечает свойство text-decoration со следующими значениями:

1. line-through. Зачеркивает текст:

p {
   text-decoration: line-throught;
}

Результат: Абзац с текстом

2. underline. Подчеркивает текст:

p {
   text-decoration: underline;
}

Результат: Абзац с текстом

Также в обоих случаях можно изменить цвет линии и ее форму. Линия принимает 3 вида: solid (сплошная), dotted (линия из точек) и dashed (пунктирная):

p {
   text-decoration: line-throught red dotted;
}

Результат: Абзац с текстом

В этом примере в свойстве text-decoration мы по порядку прописали 3 значения: оформление (line-throught), цвет (red) и вид линии (dotted)

Есть еще одно оформление текста это надстрочная линия: overline

Здесь также можно применить цвет линии и ее вид:

p {
   text-decoration: overline red dotted;
}

Результат: Абзац с текстом

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?