隐藏父元素中的某些内容,但在CSS中显示子元素

Question

我在Wordpress Woocommerce网站上有以下代码输出"从£189.00"

我想删除"From"这个词.我敢肯定必须有一个简单的方法来使用类似的东西.price:pre {display:none;}.

<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>

如何从这段代码隐藏单词"From",理想情况下使用CSS？作为替代方案,我对functions.php中的javascript持开放态度.

由于Wordpress的限制性及其输出的代码,我无法编辑上面的代码段.我必须在CSS或functions.php中操作上面的代码

Answer 1

您可以使用font-size隐藏文本,然后为子跨度元素覆盖它,如下所示:

.price {
  font-size: 0px;
}

.price span {
  font-size: 16px;
}

<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span>
</p>