title: Can I use multiple pseudo selectors focus with before/after on the same element?
body: <p>I'm trying to combine using pseudo selectors with pseudo elements to create a custom tooltip.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input id='test'/&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#test {
      position: relative;
  }
  
  #test:focus {
      background-color: #08c;
  }
  
  #test:focus:before {
      position: absolute;
      left: 100%;
      width: 10px;
      height: 10px;
      background-color: black;
  }
  </code></pre>
  
  <p>A fiddle running the code: <a href="http://jsfiddle.net/9ujEH/" rel="nofollow">http://jsfiddle.net/9ujEH/</a></p>
  
  <p>Currently the input will change to blue when focused as a result of #test:focus but the black sqaure doesn't show up like I thought it would from #test:focus:before.</p>