Как зачеркнуть цену по диагонали (наискось)?

Всем привет!
В сегодняшней статье я расскажу, как зачеркнуть текст по диагонали (наискось), используя HTML+CSS.
Где это вы сможете использовать?
Использовать такую фишку вы можете для цены, когда старая цена перечеркивается, а новая выставляется.
Вот, собственно, что и в результате у нас с вами должно получиться:

Теперь сам код:

HTML:

<span class="cena">350.00 $</span>

CSS:

.cena {
position: relative;
font-size: 40px;
}

.cena:before {
border-bottom: 3px solid red;
position: absolute;
content: "";
width: 100%;
height: 50%;
transform: rotate(-7deg);
}

Строка №12 – тут вы можете поменять наклон косой линии. Например, если вы укажете не «-7deg», а «7deg», то косая будет в зеркальном отражении:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, html, Вебмастеру, для сайта