CSS 带有空格的删除线价格

Question

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

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

它看起来是这样的：

它应该是这样的：

我尝试使用此方法border-bottom: 1px solid;，但问题是不可能添加某种负填充......

有人知道如何解决这个 CSS 问题吗？其实这是一个很小的问题，但经过很长时间的研究，我没有找到解决方案。

编辑：

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

超文本标记语言

<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，我可以对样式进行更具体的说明，但希望这能为您指明正确的方向。