:before 导致元素不可选择

Question

我使用 CSS 的 :before 选择器为我的 <blockquote> 加上引号。一切正常，它有效，但有 1 个问题。引号导致接近此标记的元素无法选择。或者，更准确地说，它们不能直接选择。引号位于它们的顶部，浏览器会尝试选择它（尽管无法选择 :before 元素）而不是位于它们后面的元素。

jsFiddle：http://jsfiddle.net/5z3YY/1/
尝试选择“blabla”或“foobar”。你不能（或者，更准确地说：只使用鼠标，你可以选择整个单词或什么都不选），但我想要做的是赋予能力。
在 Chrome 28 和 Firefox 22 上测试。

代码：

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);
}

问候。

Answer 1

显然，最简单的解决方案是将overflow: hidden 应用于blockquote 元素。然后伪元素被剪裁，并且永远不会大于块引用本身。

blockquote {
    overflow: hidden;
}

Fiddle

Answer 2

问题在于这条规则：position: absolute;。

您可以使用它使块引用中的元素再次可选择：

blockquote p {
    position: relative;
}

此外，使用以下方法将您的 <blockquote> 包装在 <div> 中：

div {
    position: relative;
    overflow: hidden;
}

在这种情况下，您可以从<blockquote> 中删除position: relative;。

演示

Try before buy