title: How to combine input:after:focus pure css?
body: <p>I have an input field which requires specific gradient borders on focus. So, I've created this kind of border as background color on the block and smaller background on :after element. 
  It works at the simple block, but doesn't work on :focus. </p>
  
  <p><code>.test:focus:after</code> and <code>.test:after:focus</code> are not working.</p>
  
  <p>Is there any solution? </p>
  
  <p>Here is the sample to see what am I talking about <a href="http://codepen.io/anon/pen/Ajiwk" rel="noreferrer">http://codepen.io/anon/pen/Ajiwk</a></p>
  
  <p>Thank you!</p>