彩色圆形边框周围的伪内容与图像精灵？

Question

我正在使用具有透明度的图像精灵，它适用于伪内容。我需要在图像周围有彩色的圆形边框。

这是我到目前为止所做的： http://codepen.io/anon/pen/bpmGaz

.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

-fno-rtti

我尝试使用outline属性但遗憾的是它无法跨浏览器使用border-radius。

Answer 1

将此代码添加到伪元素似乎可以解决问题：

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

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