Animate :hover:after

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/