Оформления блока акций через CSS

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей. И по этой причине, стили должны быть броскими и привлекающими взгляды пользователей. Мы рассмотрим вариант размещения на сайте с тёмной темой.

Для использования данных стилей для теста вашего сайта, вам надо перекопировать следующие части кодов:

                <div class="strikethrough">
                    <p>
                        старая цена: <span>2000 Р</span>
                    </p>
                    <p>
                        Цена со скидкой <span class="sale">1000 P</span>
                    </p>
                </div>

            

                .strikethrough {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 40px;
                    color: #404040;
                    background-color: #222;
                    text-shadow: 1px 1px 1px #999;
                    box-shadow: inset 0 0 15px 0 #fff;
                    padding: 20px 40px;
                }
        
                .strikethrough p {
                    margin: 0 0 10px 0;
                }
        
                .strikethrough span {
                    position: relative;
                    z-index: 1;
                }
        
                .strikethrough span::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: rgb(190, 5, 5);
                    box-shadow: 0 0 10px 1px #f00;
                }
        
                .strikethrough span.sale {
                    color: #727272;
                }
        
                .strikethrough span.sale::before {
                    height: 0;
                    background-color: transparent;
                    box-shadow: 0 0 25px 3px #fff;
                }
            

Теперь на вашем сайте имеется такой же блок со стилизованным текстом.