how to make transition style apply to :before content - css

Question

html:
<div id='test'><span></span></div>
CSS:
#test:hover span:before{content:'I want this to make the div expand in ease'}
#test, #test span:before, #test span{-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in}
I'm wondering if this can be achieved my CSS only: when mouseover #test, some text should be added into span, and the outer div should be expanded smoothly in ease.
The above HTML+CSS doesn't work, the DIV would expand immediately.

Answer 1

Here's one way to do it: http://jsfiddle.net/m49tdabh/. Note: I would recommend adding content in between span tags instead of using pseudo-elements.
HTML:
<div id='test'>
<span></span>
</div>
CSS:
#test {
outline: 1px dotted gray;
}
#test span {
display: table;
}
#test span:before {
content: "Hidden message displayed on hover";
display: inline-block;
width: 0%;
overflow: hidden;
white-space: nowrap;
border: 1px solid transparent;
transition: width 0.3s linear;
}
#test:hover span:before {
width: 100%;
border-color: red;
}

Answer 2

The reason your transitions aren't working is because there is nothing to transition in this scenario.
Computed values don't work for CSS transitions, as a transition needs both an initial and a destination state. So something like
#test span:before {
content: '';
max-height: 0;
max-width: 0;
overflow: hidden;
display: inline-block; }
#test:hover span:before {
content: 'I want this to make the div expand in ease';
max-height: 500px;
max-width: 500px;
transition: all 0.2s ease-in;
}
will work as the max height provides both an initial and destination value. That is what becomes animated in this scenario, not the simple adding of content as the CSS is agnostic of what content in present in the element – despite what you might think from seeing the content attribute in use for pseudo elements.