title: Is it possible to use :hover on :first-child:after?
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div &gt; :first-child:after {
      background-color: orange;
      color: #fff;
      font-family: sans-serif;
      font-size: 50px;
      line-height: 50px;
      text-align: center;
      vertical-align: middle;
      -webkit-font-smoothing: antialiased;
      content: "hello world";
      display: block;
      font-size: 50px;
      height: 160px;   
      line-height: 160px;
      margin-top: 14px;
      font-weight: normal;
  }
  div &gt; :first-child:after:hover {
      background-color: #44b800;
  }
  </code></pre>
  
  <p><strong>Fiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/VSBr6/" rel="nofollow">http://jsfiddle.net/VSBr6/</a></p>
  
  <p>Basically, all I want to do is change the background-color on hover but it doesn't seem to work.</p>