Question

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).

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…

Here’s a jsFiddle of my issue:
http://jsfiddle.net/tempertemper/KzQZQ/

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.

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.

Thanks for taking a look 🙂

Answer 1

I did notice the problem in Chrome as well. By just adding a background to the :before you can actually see what is happening (a trick i often use), or you could try the 3D view in Firefox. Your suspicion was right, the brace is actualy lying on top of the link. This makes sence as the DOM is rendered before the css is apllied. Adding a z-index did solve the problem though. I updated your fiddle: http://jsfiddle.net/KzQZQ/1

This should solve it. Strange that this did not work for you, but perhaps you where doing something wrong… Let us know if you have any more issues with this.