Yo, I’ve been busting my head over this for days now, I was wondering if anyone has any ideas. Here’s what I want to do. Say I have an <a> element, which is a link to somewhere, but I’ve styled it so that it’s an image. So the element is
<a href="bla.htm" id="logo"></a>
and the css is
#header #hcontainer #logo {float:left;width:120px;height:120px;background-image:url(logo2ss.gif);background-repeat:no-repeat;background-position:0px -120px}
#header #hcontainer #logo:hover {background-position:0px 0px}
Now, as you can see, the a tag doesn’t have anything inside it. I’d like to put some text inside it like so <a href=“bla.htm” id=“logo”>This is a link</a> but I’d like to hide that text with css because of degradability. If someone has an old browser or is using a screenreader or a mobile phone, they can’t see the picture but they can see the content of the link.
So, how would you go about hiding the text inside the a element with css?
