html - CSS Hide outer Span and show inner span

Question

<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>

Working in WooCommerce I want to hide "as low as" which is contained in an outer span yet show the price which is contained within an inner span.

If someone could guide me as to how to do this.

Thanks

Answer 1

You can modify the font-size value to hide all text and then show the inner span text this way:

.price {
  font-size: 0;
}
.price span {
  font-size: 18px;
}

<span class="price">
  as low as 
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
     1,335.79
  </span>
</span>