CSSでテキストリンクを画像リンクに置換

<span class="abx"><a href="#">テキスト</a></span>

.abx a{
  background:url(画像.jpg) no-repeat;
  display:block;
  height:0;
  overflow:hidden;
  padding-top:40px;/* 画像の縦幅 */
  width:200px;/* 画像の横幅 */
}

どういう風に使えるのか？