title: :before element overlapping child elements
body: <p>I'm having trouble getting my head around an absolutely positioned :before element. I'm after a big quote mark to sit behind a testimonial. I used a :before element as it is a font and is therefore scalable for retina displays, saves an extra http request for the image (I don't have any other images I could make a sprite with) and it also affords me more flexibility of position (a background image would need padding on the left of the element, which would mean playing about with my grid and losing uniformity across other pages I'm using the CSS on).</p>
  
  <p>Hope that makes sense! The problem I'm encountering is that the :before element is covering the text above it. Not much of an issue if it's just text (although still an issue), but there's a link there that isn't completely clickable…</p>
  
  <p>Here's a jsFiddle of my issue:
  <a href="http://jsfiddle.net/tempertemper/KzQZQ/" rel="nofollow">http://jsfiddle.net/tempertemper/KzQZQ/</a></p>
  
  <p>I'd assume as the :before is on the li element it would sit behind the blockquote and cites but it doesn't look like that's the case.</p>
  
  <p>I've tried z-index and can't seem to get it all working properly. I've also tried changing the blockquote and cite's position value but no joy.</p>
  
  <p>Thanks for taking a look :)</p>