Всем привет!
В сегодняшней статье я расскажу, как зачеркнуть текст по диагонали (наискось), используя 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», то косая будет в зеркальном отражении:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329385 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274099 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 218694 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186296 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 176782
Добавить комментарий
Метки: css, html, Вебмастеру, для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐