Applying hover effects to background images without affect :before

by Augustus Yuan

HTML

<div>
    <a href="www.google.com"></a>
</div>

CSS

div {
    position: relative;
}

a {
  display: block;
  width: 200px;
  height: 200px;
  background: url(http://suptg.thisisnotatrueending.com/archive/19343530/images/1338832441002.png);
}

div:before {
  position: absolute;
  top:0;
  left:0;
  color:white;
  content:"★";
  background: green;
  z-index: 2;
}

a:hover {
 opacity: 0.5;   
}