title: How to display an element as a block with text in it?
body: <p>style.css:</p>
  
  <pre><code>.bar75 { display:block; text-indent:-9999px; width:75px; background-color: rgba(184,201,204,1.00);}
  
  .bar100 { display:block; text-indent:-9999px; width:375px; background-color: rgba(184,201,204,1.00);}
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code> &lt;td width="100%"&gt;&lt;span class="bar100"&gt;.&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>How it looks is</p>
  
  <p><img src="https://i.stack.imgur.com/PhREw.png" alt="enter image description here"></p>
  
  <p>I want it to be displayed with the text inside. Like "Advanced" written in it. I tried </p>
  
  <pre><code>&lt;td width="100%"&gt;&lt;span class="bar100"&gt;Advanced&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>It doesn't display the text. Where should I place the text?</p>