Стилизация зачеркнутого текста на CSS

Пример:

Обычное ~~зачеркивание~~ в контексте и вариант ~~зачеркивания~~ с применением стилей

Обычное ~~зачеркивание~~ в заголовке и ~~стилизованное~~

Старая цена ~~5000~~ рублей, а со стилями ~~5000~~

CSS:

del {
	position: relative;
    text-decoration: none;
}
del:before {
    content: "";
    width: 100%;
    height: 0.1em;
    background: #db7d76;
    position: absolute;
	top: 50%;
    left: 0;
    transform: rotate(-1deg);
}

del {

position: relative;

text-decoration: none;

}

del:before {

content: "";

width: 100%;

height: 0.1em;

background: #db7d76;

position: absolute;

top: 50%;

left: 0;

transform: rotate(-1deg);

}

Линию перечеркивания можно настроить по своему вкусу. Изменить ее цвет, толщину, наклон или даже наложить анимацию или ховер эффект.

Пример с ~~hover~~ ховер эффектом, чтобы лучше было видно то, что зачеркнули.

del:hover:before {
	top: 0;
}

del:hover:before {

top: 0;

}

Пример:

CSS:

Смотрите также:

Добавить комментарий: