Coloured round border around pseudo content with image sprite?

Question

Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.

This is what I have so far: 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%;
}

However I need it to look like this:

I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?

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

I tried using the outline property however sadly it doesn't work cross browser with border-radius.

Answer 1

Adding this code to your pseudo-element seems to do the trick:

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

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