Как добавить текст в CSS Sprite

Question

Я создаю шаблон блоггера, показанный здесь: http://aergaergerg.blogspot.com.au/ и, как вы можете видеть, кнопки для «признанных сообщений» пустые. Мне было интересно, как добавить текст к ним через гаджет html или css или что-то еще. Некоторые могут предложить просто включить текст в изображение, за исключением моей проблемы в том, что, поскольку это «признанные сообщения», очевидно, что ссылки будут сильно меняться. Вот картина того, что я хотел бы достичь:

Во всяком случае, вот HTML для показанных почтовых кнопок (CSS Sprite):

<!--Social Sprite Html2--> 
<div id="head-soc2"> 
<ul> 
<li id="Button1"><a href="http://www.spaceheroesfansite.com/p/about.html">3</a> </li> 

<li id="Button2"><a href="http://www.spaceheroesfansite.com/p/promo-codes.html"></a> </li> 

<li id="Button3"><a href="http://www.spaceheroesfansite.com/p/game-tricks.html"></a></li> 

<li id="Button4"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li> 

<li id="Button5"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li> 

</ul> 

<!--Social Sprite Html2--></div> 

И CSS для этого:

/*Social Sprite Css Buttons*/ 
#head-soc2 ul li {list-style :none; padding: 0px; float: center;} 
#head-soc2 ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: visible ; border: 0; background: url("http://3.bp.blogspot.com/-D2V1j-OWhrM/UqYsp5RVMuI/AAAAAAAADgI/IsObrayuepI/s1600/bannersprite2.png") no-repeat; display:  block;} 


#head-soc2 li#Button1 a{background-position: -787px 0px;height: 51px; width: 204px;  margin-bottom:15px;} 
#head-soc2 li#Button1 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button2 a {background-position: -787px 0px;height: 51px; width: 204px;  margin-bottom:15px;} 
#head-soc2 li#Button2 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button3 a {background-position: -787px 0px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button3 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button4 a {background-position: -787px 0px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button4 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 
#head-soc2 li#Button5 a {background-position: -787px -102px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button5 a:hover {background-position: -787px -102px;height: 51px; width: 204px} 

и если это помогает вот JSFiddle :) http://jsfiddle.net/8xZDL/

Спасибо!

Answer 1

Ну, я думаю, что следующий CSS - это ваша проблема. Я чувствую, что ты мог бы понять это, если немного застрял с ним. Просто вытащите эти 3 правила и он работает

#head-soc2 ul li a { 
    text-indent: -9999px; 
    font-size: 0; 
    line-height: 0;