Struggling to understand how an absolutely positioned :before element works. I need a large quote mark to be placed behind a testimonial. I opted for a :before element because it is a font, making it scalable for retina displays and saving an extra HTTP request for an image (I don't have other images to create a sprite with). Additionally, it gives me more flexibility in positioning without affecting my grid layout or uniformity across pages where the CSS is used.
Hopefully that explanation makes sense! The issue I'm facing is that the :before element is overlapping the text above it. This is problematic because there's a link there that isn't fully clickable...
Here's a jsFiddle illustrating the problem: http://jsfiddle.net/tempertemper/KzQZQ/
I expected the :before element to sit behind the blockquote and cites since it's on the li element, but that doesn't seem to be the case.
I've tried adjusting the z-index, as well as changing the position value of the blockquote and cite elements, but nothing seems to work properly.
Thank you for checking this out :)