css - :after 要素の CSS トランジション幅

Question

この要素の with オープニングを移行するのに問題があります。これがフィドルです。

#control:after{
    content:"R";
    background-color:#333;
    color:#fff;
    display:inline-block;
    line-height:20px;
    padding:10px;
    height:20px;
    font-weight:bold;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -ms-transition: width 2s linear;
    -o-transition: width 2s linear;
    transition: width 2s linear;
    font-family:helvetica
}

#control:hover:after{
    content: "REGGI";
    width:auto;
    cursor:pointer;
}