CSS 带删除线的价格 space

Question

我正在使用 woocommerce 并希望将原始价格显示为带删除线的价格标签（当产品打折时）。

现在的问题是 woocommerce 在货币和价格金额之间添加了一个 space，我无法更改。当我使用 .amount{ text-decoration: line-through;} 时，该行仅通过文本而不是通过它们之间的 space 。我想在所有内容中显示一条线。

这是它的样子：

它应该是这样的：

我用 border-bottom: 1px solid; 尝试过，但问题是无法添加某种负填充...

有人知道如何解决这个 css 问题吗？实际上这是一个非常小的问题，但经过长时间的研究我无法找到解决方案。

编辑：

这是我正在使用的 HTML/CSS 源代码：

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;}

请在此处找到完整的 html/css 来源和网站：https://prnt.sc/hmfatr

Answer 1

您可以使用 :after 伪元素，绝对定位在文本之上，如下所示：

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

如果您分享了您的 HTML/CSS 我可以更具体地说明样式，但希望这能为您指明正确的方向。