使用 CSS 在段落中添加双引号答案

【问题标题】：Adding double quotes to a paragraph with CSS使用 CSS 在段落中添加双引号
【发布时间】：2019-10-18 17:01:33
【问题描述】：

假设我有这一段：

<p class="myclass">This is my paragraph</p>

在此段落中添加双引号的 CSS 代码是什么？（所以它会呈现“这是我的段落”）

.myclass {}

【问题讨论】：

标签： html css

【解决方案1】：

实际上，接受的答案是错误的，或者至少是次优的。应该是：

q { quotes: '\201c' '\201d'; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

这里的\201c 是Unicode，表示左弯双引号。你没有理由不能在q 的规则中直接写双引号：

q { quotes: '“' '”'}

open-quote 和close-quote 是content 属性的特殊值，它们引用作为quotes 属性值给出的字符串。

现在你可以说：

<p><q>This is my paragraph</q></p>

或其一些变体；如果您愿意，当然可以直接在p 上添加before 和after 规则：

body { quotes: '\201c' '\201d'; }
p:before { content: open-quote; }
p:after  { content: close-quote; }

这允许您使用quotes 属性将用于引号的特定字符分解出来，而无需更改所有before 和after 规则。例如，您可以执行诸如

之类的操作

:lang(de) { quotes: "»" "«"; }

如果 lang 属性已在任何祖先上设置为 de，则获取德语风格的引号。

quotes 属性实际上允许您指定额外的引号集，以用于嵌套引号。有关详细信息，请参阅文档。

body { quotes: '\201c' '\201d'; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

:lang(de) { quotes: "»" "«"; }

<p>Quoth the raven, <q>Never more.</q></p>

<p lang="de">Sprach der Rabe: <q>Nie du Tor.</q></p>

参考资料：

【讨论】：

【解决方案2】：

.myclass:before
{
content: '\201C';
}

.myclass:after
{
content: '\201D';
}

【讨论】：

【解决方案3】：

使用pseudo-elements：

p.myclass:before, p.myclass:after {
    content: '"';
}

【讨论】：

【解决方案4】：

这是我为使我的 blockquote 中的引用起作用所做的。

这是第一个引号：

blockquote:before{content: open-quote;}

这是第二个引号：

blockquote:after{content: close-quote;)

但是，这只适用于 CSS3。

【讨论】：