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

Question

让我们说我有这一段:

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

为此段添加双引号的CSS代码是什么？(所以它会呈现"这是我的段落")

.myclass {}

Answer 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>

或其某些变体; 如果您愿意,您当然可以直接添加before和after规则p:

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>

参考文献:

Answer 2

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

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

Answer 3

使用伪元素:

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