Плавное появление текста (CSS)

[Dayks]

Всем доброго времени суток. Задача: необходимо сделать чтобы при наведении на ссылку в виде картинки (обрамленную обводкой) сбоку от нее расширялось место (увеличивается ширина обрамленной области) и там появлялась текстовая подсказка.

.block a {
float:left;
transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
width:30px;
height:30px;
border:1px solid #CECECE;
background: #fff url(images/block.png) no-repeat;
}
.block a:after {
content:'подсказка';
float:left;
margin-left:30px;
font-size:22px;
line-height:34px;
color:transparent;
}
.block a:hover {
width:50px;
background: url(images/block_hover.png) no-repeat;
}
.block a:hover:after {
font-size:22px;
color:red;
}

Как видите я пробую реализовать задачу через псевдокласс :after, но проблема в том, что подсказка появляется моментально, без анимации и при этом плавно расширяющийся блок краем плавно едет по подсказке, то есть имеет место такой визуальный "глюк":

Помогите либо исправить ошибку в коде, либо найти другое решение. Спасибо заранее.

[lolka84]

Юзайте jquery и не занимайтесь ерундой.

[sigma77]

Транзишены для псевдоэлементов работают, вроде, только в ФФ. Использую обычные теги, либо может подойдет такая реализация - http://jsfiddle.net/KDfav/

[deadrash]

Транзишены для псевдоэлементов работают, вроде, только в ФФ. Использую обычные теги, либо может подойдет такая реализация - http://jsfiddle.net/KDfav/

+ ещё overflow:hidden; для span добавить.

[Justnewone]

Да, а еще можно в свг наросовать вектор с кучей полигонов и браузер сам затупит и покажет медленное красивое слайдшоу. Но лучше все-так .show('1000')