title: Hide element, but show CSS generated content
body: <p>Is there a way of hiding an element's contents, but keep its <code>:before</code> content visible?
  Say I have the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="addbefore hidetext"&gt;You are here&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.addbefore:before {
      content: "Show this";
  }
  .hidetext {
      // What do I do here to hide the content without hiding the :before content?
  }
  </code></pre>
  
  <p>I've tried: </p>
  
  <ul>
  <li>using <code>display: none</code> and setting <code>display: inline</code> on <code>:before</code>, but both are still hidden  </li>
  <li>using <code>width: 0; overflow: hidden</code>;, but then additional space seems to be added (?)  </li>
  <li>using color: transparent;, but then, of course, the content of the span still takes up space  </li>
  <li>using <code>text-indent: -....px</code>, but 
  <ol>
  <li>this is frowned upon by search engines and </li>
  <li>it seems not to work for span elements (?)  </li>
  </ol></li>
  </ul>
  
  <p>Any other ideas as to how I might do this?</p>