title: CSS hover for after and before element
body: <pre><code>&lt;div id="box"&gt;&lt;/div&gt;​
  
  #box{
  height:40px;
  width:100px;
  background:red;
  }
  
  #box:hover{background:blue;}
  
  #box:after{
  content: "";
  height: 10px;
  position: absolute;
  width: 0;
      margin-top:50px;
  background:red;
  border: 10px solid transparent;
  border-top-color: #04ADE5;
  }
  ​
  </code></pre>
  
  <p>Sample <a href="http://jsfiddle.net/zfQvD/4/" rel="nofollow">http://jsfiddle.net/zfQvD/4/</a></p>
  
  <p>I am using after created an arrow, but when I hover on the box, the arrow background is not changed? how to change the background for arrow, when onhover the box? thanks</p>