Question

这个CSS在对其附加的内容中的单个块引用应用时会产生很好的效果。

但是，当有多个blockquote时，除了生成的内容外，一切都有效。

换句话说，引号只适用于blockquote的第一个实例。

blockquote{
    border:1px solid #ccc;
    border-width:1px 0;
    margin:20px 0;
    padding: 2px 10px;
    padding-left:50px;
    font-style:italic;
    font-size:1.2em;
    font-weight:bold;
    quotes:'\201C';
    clear:both;
}
blockquote:before{
    content:open-quote;
    font-size:5em;
    position:absolute;
    color:#ccc;
    margin:0 0 0 -45px;
    font-family:georgia,serif;
    font-style:normal;
    font-weight:normal
}

更新：感谢Alex Morales，通过添加以下内容解决了该问题：

blockquote:after{content:close-quote;position:absolute;visibility:hidden;}

Answer 1

将您的第一个语句更改为：

blockquote {
    border:1px solid #ccc;
    border-width:1px 0;
    margin:20px 0;
    padding: 2px 10px;
    padding-left:50px;
    font-style:italic;
    font-size:1.2em;
    font-weight:bold;
    quotes:'\201C''\201C';
}

See jsFiddle demo

Answer 2

您需要为：after伪元素应用close-quote。这应该照顾你的问题。

以下是一些示例代码：

blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}

CSS：应用于blockquote的生成内容仅应用于第一个实例？

2 个答案: