使用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>

参考文献：

• quotes property
• :lang pseudo-class
• content property, with open-quote and close-quote values
• q element for quoted strings

Answer 2

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

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

Answer 3

使用 pseudo-elements ：

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

小提琴：http://jsfiddle.net/2bE8j/1/

Answer 4

以下是我在我的blockquote上做引文的工作。

这是第一个引号：

blockquote:before{content: open-quote;}

这是第二个引号：

blockquote:after{content: close-quote;)

但是，这仅适用于CSS3。