css - 如何用大花括号设置 block 引用的样式

Question

我正在尝试设置一段文本的样式，使其每一侧都被一个大花括号包围(以便每个大括号占据元素每一侧的整个高度)。这是 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 标记，如果这样可以使样式更容易的话。

Answer 1

删除 和

标签。将开始的

标记编辑为

。使用此 CSS(使用 :before 和 :after 伪元素的字体大小):

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

因为 em 是 :before 和 :after 伪元素的度量单位，所以它们链接到它们父元素的字体大小—— block 引用本身。

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