Animate :hover:after - html

Question

I have the following css rule:
button:hover:after {
content: ' ' attr(title);
}
Basically the button has a fontawesome icon as content and a title attribute. When you hover over the button, it will add a space and then the title to the button's content. See this JSFiddle
Now the question, how would I animate this? I want the new width of the button to be animated so it doesn't appear this static and ugly.

Answer 1

I got a solution, which works but might not be best fashion
button:after {
content:' ' attr(title);
visibility: hidden;
opacity:0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
font-size: 0;
}
button:hover:after {
content:' ' attr(title);
visibility: visible;
opacity:1;
transition-delay:0s;
font-size: 13px;
}
See working JSFiddle here
Background
Your approach is analog to using the display property. Therefore credits go to this Transitions on the display: property with my little hack to decrease the font-size to 0 in the initial :after state
Update
Even smoother transition:
button:after {
content: ' ' attr(title);
font-size: 0;
opacity: 0;
transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}
button:hover:after {
font-size: inherit;
opacity: 1;
transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}
See JSFiddle

Answer 2

It can work like this, but for this solution, you'll have to put fixed width to your button.
button:hover:after {
content: ' ' attr(title);
}
button:hover{
width:70px;
}
button{
width:20px;
overflow:hidden;
white-space:nowrap;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
http://jsfiddle.net/j3zw1thh/1/