How to add text to a CSS Sprite

Question

I'm creating a blogger template shown here: http://aergaergerg.blogspot.com.au/ and as you can see the buttons for 'featured posts' are empty. I was wondering how I'd add text to them through the html gadget itself, or css, or whatever is possible. Some might suggest to just include the text within the picture, except my problem is that since it's 'featured posts' obviously the links are going to change a lot. Here's a picture of what I'd like to achieve:

Anyway, here's the HTML for the featured post buttons (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>

And the CSS for it:

/*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}

and if it helps here's a JSFiddle :) http://jsfiddle.net/8xZDL/

Thanks!

Answer 1

Well, I think the following CSS is your problem. I feel like you mighta been able to figure this out if you stuck with it for a bit. Just pull those 3 rules out and it works

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