CSS SPRITEでの li 文字の隠し方実践 - HTML5, jQuery役立つ情報ブログ

spanタグやemタグを使わずに文字を隠す方法です。
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
を使うことで、常に画像の外側に文字があるように設定することができます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sprite button</title>

<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="drink"><a href="#">drink</a></li>
<li id="info"><a href="#">info</a></li>
<li id="contact"><a href="#">contact</a></li>
</ul>
</div> <!--/#nav-->
</body>
</html>




@charset "utf-8";
/* CSS Document */

/*reset*/
body, div, ul, li, a {
  margin: 0;
  padding: 0;
}

/*style*/
#nav {
  width: 800px;
  margin: 20px auto;
}
li {
  list-style: none;
  float: left;
}
li a {
  text-decoration: none;
  width: 160px;
  height: 50px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;  /*はみ出した文字が入ってこないように*/
  background: url(../img/btn.jpg) no-repeat left top;
}

/*action*/
#nav li#home a:link {
  background-position: left top;
}
#nav li#home a:hover {
  background-position: left -60px;
}
#nav li#food a:link {
  background-position: -160px top;
}
#nav li#food a:hover {
  background-position: -160px -60px;
}
#nav li#drink a:link {
  background-position: -320px top;
}
#nav li#drink a:hover {
  background-position: -320px -60px;
}#nav li#info a:link {
  background-position: -480px top;
}
#nav li#info a:hover {
  background-position: -480px -60px;
}#nav li#contact a:link {
  background-position: -640px top;
}
#nav li#contact a:hover {
  background-position: -640px -60px;
}