css - 如何用大括号括住引用的样式

我正在尝试设置文本块的样式，以使其在每一侧都被一个大花括号包围（以便每个大括号占据元素每一侧的整个高度）。这是HTML：

<blockquote>
<span class="braceleft">&#123;</span>
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus           Pellentesque at neque lorem, vitae aliquet risus.</p>
<span class="braceright">&#125;</span></blockquote>

我还应该提到我正在WordPress中尝试这样做，我知道它可以添加不需要的标签。如果我能为纯HTML获得正确的CSS，那么我希望可以弄清楚如何去除不需要的标签。

如果可以简化样式，则可以轻松更改HTML标记。

最佳答案

删除和

标记。编辑开始的标记为
。使用以下CSS（对：before和：after伪元素使用font-size播放）：

blockquote  {
    font-size:1em;
}
blockquote.addCurlys:before {
    content: "{";
    font-size:10em;
}
blockquote.addCurlys:after {
    content: "}";
    font-size:10em;
}

因为em是：before和：after伪元素的度量单位，所以它们链接到其父级的字体大小-blockquote本身。

我认为大多数浏览器现在都支持::用于伪元素-我仍然倾向于只使用一个

关于css - 如何用大括号括住引用的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15580361/