How to HIDE text with CSS?

Question

Have this code:

<h4 class="ihf-price" style="margin-right:10px;">
   <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4> </div> </div>

How do I hide the text "(Fee Simple)" from displaying?

Want the Price to show but not the "Fee Simple" text

Answer 1

You can use a font-size trick like this:

h4.ihf-price {
  font-size: 0;
}

h4.ihf-price span {
  font-size: initial;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>

Or use color trick if you want to maintain the same content width of h4:

h4.ihf-price {
  color: #fff; /* Should be the same as background */
}

h4.ihf-price span {
  color: initial;
}

<h4 class="ihf-price" style="margin-right:10px;">
  <span class="ihf-for-sale-price"> $16,750,000 </span> (Fee Simple)
</h4>