提问人：Sam 提问时间：6/19/2022 最后编辑：Sam 更新时间：6/21/2022 访问量：891
如何在不接触任何 HTML 的情况下使用 ：before ：after 使用 CSS 设置 <Blockquote> 元素的样式
How to style <Blockquote> element with CSS using :before :after WITHOUT touching any HTML
问：
给定一个 HTML 引号，我希望 CSS 在不触及 HTML 的情况下自动换行在开始和结束引号内。“”
<blockquote><p>
I love you not only for what you are, but for what I am when I'm with you.
I love you not only for what you have made of yourself, but for what you are making of me.
I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities of the good in me.
I love you for helping me to construct of my life not a tavern, but a temple.
</p></blockquote>
以下 CSS 有效，但仅部分有效：
blockquote {font-style: italic;}
blockquote:before {content: '“'; float:left;}
blockquote:after {content: '”'; float:right;}
开头引号的位置正确，但结束引号不直接放在点所在的引号末尾之后。此外，报价在下一行看起来垂直错误。
以下是该问题的一个例子，引用了最近一部电影中的一句话：
如何以优雅的方式解决这个问题？谢谢！
随意在您的答案中尝试不同的简单或疯狂的布局，使这个布局成为社区使用的永恒解决方案。
答：
2赞
Temani Afif
6/19/2022
#1
保持引号内联并使元素内联p
blockquote {
font-style: italic;
}
blockquote > p {
display:inline;
}
blockquote:before {
content: '“';
}
blockquote:after {
content: '”';
}<blockquote>
<p>
I love you not only for what you are, but for what I am when I'm with you. I love you not only for what you have made of yourself, but for what you are making of me. I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities
of the good in me. I love you for helping me to construct of my life not a tavern, but a temple.
</p>
</blockquote>或以元素为目标p
blockquote {
font-style: italic;
}
blockquote > p:before {
content: '“';
}
blockquote > p:after {
content: '”';
}<blockquote>
<p>
I love you not only for what you are, but for what I am when I'm with you. I love you not only for what you have made of yourself, but for what you are making of me. I love you for ignoring the possibilities of the fool in me, and for accepting the possibilities
of the good in me. I love you for helping me to construct of my life not a tavern, but a temple.
</p>
</blockquote>评论
0赞
Sam
6/19/2022
太棒了，谢谢！使用代替有什么好处？第一个会因为具有更高的特异性而具有更高的 CSS 处理速度吗？blockquote > p {}blockquote p {}>
0赞
Temani Afif
6/19/2022
@Sam两者都具有相同的特异性，这里没有特别的好处。我只是想有一个精确的选择器并针对直接的孩子
评论
display:inline<blockquote>