Question

我使用CSS的<blockquote>选择器为我的:before添加了引号。一切都很好，它有效，但有一个问题。引号导致接近此标记的元素无法选择。或者，更确切地说，它们不能直接选择。引号位于它们的顶部，浏览器会尝试选择此选项（尽管无法选择: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

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

您可以使用它来使blockquote中的元素再次可选：

blockquote p {
    position: relative;
}

另外使用以下内容<blockquote>将<div>包裹起来：

div {
    position: relative;
    overflow: hidden;
}

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

<强>演示

Try before buy

Answer 2

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

blockquote {
    overflow: hidden;
}

Fiddle

：之前导致元素无法选择

2 个答案: