CSS Konusunda Yardım!

Merhabalar iyi akşamlar css'de biraz bilgim var ama burda anlamadım şu şekilde bir şey yapmak istiyorum. Altta bıraktığım resimde gördüğünüz gibi "Yeni Yıla Özel %25" yazan yerde fiyat yazıyor bu fiyatlar ürünün fiyatına göre %25 indirimli olarak gösteriyor nasıl yapabilirim?

css işin görselidir kırmızı kutuyu mu nasıl yapmak ıstıyorsunuz? Eğer indirim hesaplatma yaptırmak istiyorsanız bu yazılım ile alakalı bır kısımdır

Kırmızı kutu ve içerisindeki fiyat kısmı hocam.

yanlış yönlendirmek istemem ama css ile yapamazsın. küçük bir javascript ile normal fiyatı alıp %25 indirimli çıktı alırsın css ile de o çıktıyı istediğin yere oturtursun

tam olarak aradığın değil ama fikir olarak yardımcı olur
https://jsfiddle.net/siddhuphp/4sob8ov1/
burdaki kodları mevcut fiyatı alma ekleyip
https://jsfiddle.net/zuul/k1pnx0mw/
burdaki gibi javascript ile yeni html kodu oluşturup sonra verdiğin id ye göre css den isteidğin yere yerleştireceksin

.discount{
            display: flex;
            justify-content: center;
            padding:15px;
            background-color: red;
        }
        .discount span:first-child{
            margin-right: 15px;
        }
        .discount span{
            color: white;
            font-size: 14px;
        }

<div class="discount">
            <span>YENİ YILA ÖZEL %25</span>
            <span>₺343,99</span>
        </div>

Çok teşekkür ederim değerli vaktinizi ayırdığınız için js olayını nasıl yapabilirim acaba fiyatlar değişiklik gösteriyor çünkü?

Bunun en mantıklı yapımı sisteminiz içerisinden yapmaktır. İndirimli fiyat yada indirim özelliği yoksa ekletmeniz gerekmekte. Js ile görsel olarak yapabilirsiniz sepet kısmında da bunu uygulamak için sisteminize bu özelliği ekletmeniz gerekiyor.