BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как зачеркнуть цену по диагонали (наискось)?

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

2017-11-15 / Вр:08:38 / просмотров: 10635

Всем привет!
В сегодняшней статье я расскажу, как зачеркнуть текст по диагонали (наискось), используя 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», то косая будет в зеркальном отражении:

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 809
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716