html - 疑似要素で画像のサイズを変更するにはどうすればよいですか?

Question

疑似要素でいくつかのトリックを実行しようとしています。

ランキングを表示していて、画像が表示されるボックスの隅で 45 度傾いた勝者の上に王冠を表示したいと考えています。しかし、画像が大きすぎます。疑似要素に追加された画像のサイズを変更する方法はありますか?

私はこれだけを持っていますdiv:

<div class='box'></div>

これでCSS：

.box {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    position:absolute;
    top: 100px;
    left: 100px;
}

.box::after{
    content: url(URL_OF_IMAGE);
    position: absolute;
    top: -10px;    
    right: -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

JSFiddle で例を作成しました: http://jsfiddle.net/GEtds/

変更heightしてみwidthましたが、効果がありませんでした。