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

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%;
}

我尝试使用 outline 属性，但遗憾的是它不适用于具有边框半径的跨浏览器。

Answer 1

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

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

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