イメージスプライトで擬似コンテンツの周りに色付きの丸い境界線がありますか？

Question

擬似コンテンツに適用される透明性を持つ画像スプライトを使用しています。私はイメージの周りに色のついた丸い枠線が必要です。

これは私がこれまで持っているものです。 http://codepen.io/anon/pen/bpmGaz

<div class="icon"></div> 

.icon:after { 
    content: ""; 
    display: inline-block; 
    background-color: gold; 
    background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png); 
    background-position: -129px -40px; 
    height: 100px; 
    width: 100px; 

} 

.icon { 
    margin: auto; 
    margin-top: 100px; 
    position: relative; 
    width: 100px; 
} 

.icon:before { 
    content: ""; 
    display: inline-block; 
    background: gold; 
    position: absolute; 
    top: -50px; 
    left: -50px; 
    width: 200px; 
    height: 200px; 
    z-index: -1; 
    border-radius: 100%; 
} 

私はそれがこのように見える必要があるしかし：

私は、追加でこれを行うことができます擬似コンテンツ（下記参照）ですが、コードはちょっと乱雑です。これを行うためのより短い方法がありますか？

http://codepen.io/anon/pen/VaEwQy

.icon:after { 
    content: ""; 
    display: inline-block; 
    background-color: gold; 
    background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png); 
    background-position: -129px -40px; 
    height: 100px; 
    width: 100px; 

} 

.icon { 
    margin: auto; 
    margin-top: 100px; 
    position: relative; 
    width: 100px; 
} 

.icon:before { 
    content: ""; 
    display: inline-block; 
    background: gold; 
    position: absolute; 
    top: -50px; 
    left: -50px; 
    width: 200px; 
    height: 200px; 
    z-index: -1; 
    border-radius: 100%; 
} 

しかし私はそれが国境半径でクロスブラウザは動作しません。悲しいことに、アウトラインプロパティを使用してみました。あなたの擬似要素にこのコードを追加する

Answer 1

は、トリックを行うようだ：

border: 50px solid gold; 
border-radius: 100%; 

http://codepen.io/anon/pen/aNRzmE