Html ：before导致元素不可选择

我使用CSS的

：before

选择器为我的

设置了带有引号的样式。一切正常，它工作正常，但有一个问题。引号导致接近此标记的元素不可选择。或者，更准确地说，它们不能直接选择。引号位于这些元素的顶部，浏览器会尝试选择该元素（尽管无法选择

：before

元素），而不是位于它们后面的元素

jsFiddle:
尝试选择“blabla”或“foobar”。你就是不能（或者更确切地说，只使用鼠标，你可以选择整个单词或什么都不选），但我想做的是赋予它这样做的能力。
在Chrome 28和Firefox 22上测试

代码：

HTML:

---

关于。

显然，最简单的解决方案是对blockquote元素应用

overflow:hidden

。然后对伪元素进行剪裁，并且永远不会比blockquote本身大

blockquote {
    overflow: hidden;
}

---

问题在于这条规则：

位置：绝对

您可以使用此选项再次选择blockquote中的元素：

blockquote p {
    position: relative;
}

此外，使用以下方法将
包装在
中：

div {
    position: relative;
    overflow: hidden;
}

在这种情况下，您可以删除
位置：相对来自

演示

你的最后一点不正确。请参阅：。blockquote需要
相对位置，否则
绝对位置元素将与具有给定位置的最近父元素（在视口的末尾）对齐。嗯。。。但是blockquote之外的元素呢？：）Nirazul的答案更适合我-我不必将我的blockquote打包成div。但你的答案仍然很好（而且你发布的解决方案也很有效），所以我将其投票给了上级：）@m4tx谢谢。总是选择最合适的答案。但我很高兴我也能投入我的两分钱
blockquote p {
    position: relative;
}

div {
    position: relative;
    overflow: hidden;
}