:before causes elements to be unselectable

Question

I styled my <blockquote> with quotation mark using CSS's :before selector. Everything's ok, it works, but there's 1 problem. The quotation mark is causing elements that are close to this mark, are unselectable. Or, to be more exact, they're not selectable directly. Quotation mark is on the top of them and browser tries to select this (although :before elements cannot be selected) instead of elements that are lying behind them.

jsFiddle: http://jsfiddle.net/5z3YY/1/
Try to select "blabla" or "foobar". You just cannot (or, to be more exact: using only mouse, you can select whole word or nothing), but what I want to do is give ability to do it.
Tested on Chrome 28 and Firefox 22.

Code:

HTML:

<blockquote><p>blabla</p></blockquote>
foobar

CSS:

blockquote {
    min-height: 60px;
    background-color: #fafafa;
    positon: relative;
    margin: 0;
}

blockquote:before {
    display: block;
    font-size: 120px;
    content: "\201D";
    height: 1px;
    position:absolute;
    top: -5px;
    color: rgba(0, 0, 0, 0.15);
}

Regards.

Answer 1

The problem is this rule: position: absolute;.

You could use this to make the element within the blockquote selectable again:

blockquote p {
    position: relative;
}

In Addition wrap your <blockquote> in a <div> using:

div {
    position: relative;
    overflow: hidden;
}

In this case you can remove position: relative; from <blockquote>.

Demo

Try before buy