title: Show :after when hovering over the parent element via CSS
body: <p>Is it possible to <code>display:block;</code> the <code>:after</code> pseudo-element when I hover over the parent element itself?</p>
  
  <pre><code>#myDiv{
     position:relative;
     width:50px;
     height:50px;
     border-style:solid;
     background-color:red;
  }
  #myDiv:after{
     position:absolute;
     content:"";
     display:none;
     width:50px;
     height:50px;
     border-style:solid;
     background-color:blue;
  }
  </code></pre>
  
  <p>I have tired:</p>
  
  <pre><code>#myDiv:hover #myDiv:after{
      display:block;
  }
  #myDiv:hover + #myDiv:after{
      display:block;
  }
  #myDiv:hover &gt; #myDiv:after{
      display:block;
  }
  </code></pre>
  
  <p>Yet no luck, here's a <a href="http://jsfiddle.net/f8jmM/" rel="noreferrer">fiddle</a>.</p>