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

Несколько примеров как зачеркнуть текст по диагонали с помощью псевдоэлементов 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, обновлено 30.12.2019
14237
Предыдущая запись Перечёркнутый текст
Следующая запись Размеры Iframe

Комментарии

, чтобы добавить комментарий.

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

Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
127674
+15
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
47006
+6
Блоки со стрелками (часть 1)
Добавить стрелки к блоку можно с помощью псевдо-элемента :before.
26675
+2
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
54557
+9
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
62090
+25
Как сделать несколько фонов в background
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они...
13630
-1