Html 使用 CSS 为段落添加双引号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8040217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding double quotes to a paragraph with CSS
提问by webmasters
Lets say I have this paragraph:
假设我有这一段：
<p class="myclass">This is my paragraph</p>
What is the CSS code to add double quotes to this paragraph? (So it will render "This is my paragraph")
为这一段添加双引号的 CSS 代码是什么？（所以它会呈现“这是我的段落”）
.myclass {}
采纳答案by Rob W
Use pseudo-elements:
使用伪元素：
p.myclass:before, p.myclass:after {
content: '"';
}
Fiddle: http://jsfiddle.net/2bE8j/1/
回答by
Actually, the accepted answer is wrong, or at least suboptimal. It should be:
实际上，公认的答案是错误的，或者至少是次优的。它应该是：
q { quotes: '1c' '1d'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
The \201chere is Unicode for a left curly double quote. There's no reason you could not write the double quotes directly in the rule for q:
在\201c这里是Unicode的左花双引号。没有理由不能在规则中直接写双引号q：
q { quotes: '“' '”'}
open-quoteand close-quoteare special values for the contentproperty, which refer to the strings given as values for the quotesproperty.
open-quote和close-quote是content属性的特殊值，指的是作为quotes属性值给出的字符串。
Now you can just say:
现在你可以说：
<p><q>This is my paragraph</q></p>
Or some variant thereof; you could of course add the beforeand afterrules directly on pif you would prefer:
或者它的一些变体；如果您愿意，您当然可以直接添加before和after规则p：
body { quotes: '1c' '1d'; }
p:before { content: open-quote; }
p:after { content: close-quote; }
This permits you to factor out the specific characters used for quotes using the quotesproperty, without changing all the beforeand afterrules. For instance, you can then do things such as
这允许您使用quotes属性提取用于引号的特定字符，而无需更改所有before和after规则。例如，您可以执行以下操作：
:lang(de) { quotes: "?" "?"; }
to get German-style quotes, if the langattribute has been set to deon any ancestor.
获取德语风格的引号，如果该lang属性已de在任何祖先上设置为。
The quotesproperty actually allows you to specify additional sets of quotes, for use with nested quotes. See the docs for more details.
该quotes属性实际上允许您指定额外的引号集，以便与嵌套引号一起使用。有关更多详细信息，请参阅文档。
body { quotes: '1c' '1d'; }
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>References:
参考：
回答by Pedryk
.myclass:before
{
content: '1C';
}
.myclass:after
{
content: '1D';
}
回答by rockingtree
Here is what I did to make the quotations on my blockquote work.
这是我为使我的 blockquote 上的报价起作用而所做的工作。
This is for the first quotation mark:
这是第一个引号：
blockquote:before{content: open-quote;}
and this is for the second quotation mark:
这是第二个引号：
blockquote:after{content: close-quote;)
However, this only works in CSS3.
但是，这只适用于 CSS3。
