Перечёркивание текста по диагонали

Несколько примеров как зачеркнуть текст по диагонали с помощью псевдоэлементов CSS :before и :after.

1

Сверху вниз

<del>1000 ₽</del>
HTML
del {
	font-size: 40px;
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 3px solid red;
	position: absolute;
	width: 100%;
	height: 50%;
	transform: rotate(12deg);
}
CSS
2

Снизу вверх

<del>1000 ₽</del>
HTML
del {
	font-size: 40px;
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 3px solid red;
	position: absolute;
	width: 100%;
	height: 50%;
	transform: rotate(-12deg);
}
CSS
3

Крестом

<del>1000 ₽</del>
HTML
del {
	font-size: 40px;
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 3px solid red;
	position: absolute;
	width: 100%;
	height: 50%;
	transform: rotate(-12deg);
	left: 0;
}
del:after {
	content: "";
	border-bottom: 3px solid red;
	position: absolute;
	width: 100%;
	height: 50%;
	transform: rotate(12deg);
	left: 0;
}
CSS
21.08.2019, обновлено 14.09.2019 41
Предыдущая запись Перечёркнутый текст
Следующая запись Размеры Iframe

Поделится

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

Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
В продолжении первой части, примеры как добавить стрелки к блоку с рамкой. Используются оба псевдо-элемента :before и...
Зачастую в мобильных версиях сайта перенос текста тегом br только мешает, исключить его влияние можно несколькими...
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.