Перечёркнутый текст

Первыми тегами для зачёркнутого текста были <strike> и <s>.

<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>
HTML

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>, он помечает текст как удаленный, что семантически правильнее.

<del>Перечёркнутый текст</del>
HTML

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

<del>Перечёркнутый текст</del>
HTML
del {
	text-decoration: line-through;
	text-decoration-color: red;
}
CSS

Также можно изменить стиль линии с помощью text-decoration-style.

Значение Описание Пример
text-decoration-style: solid; Одинарная линия Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу <del> задается цвет линии, вложенному <span> цвет текста.

<del>
	<span>Текст зачёркнут красной линией</span>
</del>
HTML
del {
	color: red;
	text-decoration: line-through;
}
del span {
	color: blue;
}
CSS

Третий способ

Линия добавляется псевдо элементом :before, но у текста не должно быть переносов.

<del>Перечёркнутый текст</del>
HTML
del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
}
CSS

При такой реализации, можно расположить линию за текстом.

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
	z-index: -1;
}
CSS
21.08.2019, обновлено 30.08.2019 90
Предыдущая запись Ведущие нули у ol

Поделится

Другие публикации

Сборник горизонтальных линий с тегом hr разных видов и стилей.
Ниже приведён список MIME-заголовков и расширений файлов. В PHP скриптах, перед отправкой файлов в браузер,...
В случаях где анонсы не заполнены, сформировать и вывести их можно несколькими способами...
Подчеркивание текста можно сделать с помощью нескольких свойств CSS - background-image, background-size и...
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или...