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

21.08.2019

80825

Первыми тегами для зачёркнутого текста были <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