Search code examples
csswoocommercetext-decorationsstrikethrough

CSS Strikethrough price with space

I am using woocommerce and want to display the original prices as a price tag with a strikethrough (when products are on sale).

The problem is now that woocommerce adds a space between the currency and the price amount, which I cannot change. When I use .amount{ text-decoration: line-through;} the line goes only through the text but not through the space between them. I want to display one line through everything.

This is what it looks like:

enter image description here

This is what it should look like:

enter image description here

I tried this using border-bottom: 1px solid; but the problem is that it's not possible to add some kind of negative padding...

Anyone got an idea how to solve this css issue? Actually it's a really small problem but I was not able to find a solution after a long time of research.

Edit:

This is the HTML/CSS sourcecode which I am using:

HTML

<p class="deals-value"><span><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>157.00</span></span></p>

CSS

.deals-value .amount {text-decoration: line-through;} .woocommerce-Price-currencySymbol {margin-right: 10px;}

Please find the full html/css source and website here: https://prnt.sc/hmfatr

Solution

  • You could use the :after pseudo element, absolutely positioned over the text, something like this:

    .amount{ 
  position: relative;
}
.amount::after{
  content: "";
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: -10px;
  left: 0;
}

    If you shared your HTML/CSS I could be more specific with the styling, but hopefully this points you in the right direction.