title: Hiding text in an element
body: <p>Let's say we have:</p>
  
  <pre><code>&lt;div id="view-item-hero-info"&gt;
      &lt;h2&gt;{{name}}&lt;/h2&gt;
      &lt;h4&gt;{{location}}&lt;/h4&gt;
      &lt;h3&gt;
          &lt;span id="view-item-hero-header-score"&gt;
              You scored {{userScore}}pts
          &lt;/span&gt;
      &lt;/h3&gt;
      {{description}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way I can hide the text directly inside <code>#view-item-hero-info</code>? I know I can use <code>text-indent</code> but is there another, <em>nicer</em>, way?</p>
  
  <p><strong>Note:</strong> I don't want to hide the element, just everything inside it.</p>
  
  <p><strong>Note 2:</strong> Hiding all the elements within <code>#view-item-hero-info</code> is fine, I can use <code>#view-item-hero-info &gt; * { display: none }</code> but then the text directly within <code>#view-item-hero-info</code> is still visible. I need <code>#view-item-hero-info</code> to remain visible so that its background can be seen but the text inside it must be hidden.</p>