CSS Transitions with pseudo elements

Webkit browsers don't apply transitions to pseudo elements such as :before and :after

HTML

<div id="elem">Hello World</div>

CSS

div#elem
{
    background: red;
    border: 1px solid green;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div#elem:hover
{
    background: green;
    border-color: red;
}

div#elem:before
{
    content: 'before';
    background: green;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div#elem:hover:before
{
    background: red;
}

div#elem:after
{
    content: 'after';
    background: green;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div#elem:hover:after
{
    background: red;
}