Цветная круглая рамка вокруг псевдо содержания с изображением спрайта?

Question

Im использование спрайта изображения с прозрачностью, которое im применяется к псевдо-контенту. Мне нужна цветная рамка вокруг изображения.

Это то, что я до сих пор: 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