title: Hiding text in a link
body: <p>I have a couple of questions about the problem of hiding text inside an anchor tag and only displaying a background image. </p>
  
  <p>Note to those about to bombard me with links to other articles and tell me that this is a repeat question: I have scoured this site and the web in general and read the solutions (and by solutions I mean mostly hacks) people came up with. What most people seem to be doing (or have done up until recently) was the <code>-9999px</code> hack. Also popular is/was wrapping the text in a span and doing something like <a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/" rel="nofollow">this</a> or <code>visibility: hidden</code>.</p>
  
  <p>Now, I personally think that "hiding" the text would really only make sense in the first place if it was hidden <em>dynamically</em>, i.e. displayed only if the background image wasn't loading (for whatever reason). However, all the "solutions" I found effectively remove the text completely or at least hide it permanently so even if the background image isn't loaded, the text still wouldn't be displayed.</p>
  
  <p>So here are my questions:</p>
  
  <ol>
  <li><p>Why would one want to have text and then permanently hide it at all? Why not just leave the anchor empty - i.e. just don't put any text in it - and only have the image displayed? Why have text and then go through the headache of figuring out how to hide it? What's the point of that? Am I missing something here?</p></li>
  <li><p>Now that we have CSS3, are there actual non-hacky, dynamic ways to hide text when the background image is displayed and have the text appear when the image - for whatever reason - fails to load? I couldn't find any resources so I am assuming this is not supported but maybe one of you ninjas knows better?</p></li>
  </ol>