Красивая реализация ссылки ввиде картинки и текста

Ссылка ввиде картинки, как сделать так чтоб при наведении курсора на эту картинку, она исчезала и мы видели обыкновенную ссылку, средствами XHTML/CSS?

Надо использовать метод замещения текста картинкой, где картинка закрывает текст, путем присваивания ей (картинке) абсолютного позиционирования и поднимая её по оси z (position:absolute;z-index:100; ) . Так вот - идея проста. Поднимаем картинку, под ней у нас текст ссылки и при наведении на ссылку мышки (a:hover) картинка исчезает (display:none)

<style type="text/css">
.container a{
    text-align:center;
    display:block;
    position:relative;
    height:80px;
    width:80px;
    padding:10px;
    background:#000;
 }
.container a img{
    position:absolute;
    z-index:10;
    top:10px;
    left:10px;
    border:none;
 }
.container a:hover img{
    display:none;
    _filter:alpha(opacity=100);
 }
</style>

<div class="container"> <a href="http://myopinion.net.ua">
  <img src="images/cat.jpg" alt="" width="80px" height="80px" />
  кошки-мышки:)       
 </a>
</div>

Как выглядит:

кошки-мышки:)

... а что дальше?

Таблица символов

Коды символов для html.
Незабывайте, для стрелочек есть свои коды, и не надо нагружать пользователя картинками.(Лично мне приходилось видеть когда создаваличь картинки в место ← и →)
Часто используемые:

 		неразрывный пробел
 		короткий пробел
 		длинный пробел
­	­	мягкий перенос
—	—	длинное тире
–	–	короткое тире
…	…	многоточие
«	«	левая кавычка елочка
»	»	правая кавычка елочка
©	©	(c)
®	®	(R)
™	™	TM

Математические:

±	±	+-
×	×	умножить
≠	≠	не равно
&lt;	<	<
&gt;	>	>
&le;	≤	<=
&ge;	≥	>=
&radic;	√	квадратный корень
&sup2;	²	квадрат, вторая степень
&sup3;	³	куб, третья степень
&frac14;	¼	1/4
&frac12;	½	1/2
&frac34;	¾	3/4
&infin;	∞	бесконечность

Стрелки:

←	←	стрелка влево
↑	↑	стрелка вверх
→	→	стрелка вправо
↓	↓	стрелка вниз
↔	↔	стрелка влево и вправо
↵	↵	стрелка вниз, потом влево, как Enter
⇐	⇐	стрелка двойная влево
⇑	⇑	стрелка двойная вверх
⇒	⇒	стрелка двойная вправо

Прочие:

&	&	амперсанд
€	€	евро
′	′	'
″	″	''
·	·	точка на середине высоты строки
‾	‾	Надчерк
°	°	градус

... а что дальше?

Список, разделенный линиями

Исходный код:

<style type="text/css">
ul.line-separated{
    background-color: blue;
    padding: 0;
    margin-left: 1em;
    color:#383838;
    }
ul.line-separated li{
    background-color: white;
    margin: 1px 0 0 0;
    padding: 0;
    list-style-type: none;
    }
</style>
<ul class="line-separated">
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
</ul>

Как это выглядит:

• пункт 1
• пункт 2
• пункт 3

Оригинальная статья на artlebedev.ru
... а что дальше?