CSS 3: Adding quote symbol to beginning of blockquote
Can anyone tell me why this (also available live at http://jsfiddle.net/A2eTG/6/) renders a "
symbol before the blockquote in Firefox but not Chrome/Safari?
blockquote
{
padding: 0 60px;
padding:10px;
padding-left:55px;
}
blockquote:before {
display: block;
font-size: 700%;
content: open-quote;
height: 1px;
margin-left: -0.55em;
position:relative;
top:-20px;
}
The blockquote:before
selector shows up in Chrome's developer tools but doesn't appear on开发者_如何学JAVA screen.
What gives?
To help others who came across this and want prettier quotes than "
, these are the codes for double open, double closed, single open, and single closed quotation marks respectively: "\201C"
, "\201D"
, "\2018"
, "\2019"
.
Looks like Chrome doesn't support content: open-quote
. Try this instead:
content: "\"";
Chrome supports content
partially, and open-quote
is not supported.
So what you can try is to use content: '“';
The shortcut to print the open-quote
in Windows is Alt+0147
and if there is need for close-quote
also then Alt+0148
.
See Rendering Quotes With CSS for more detail on this issue as well as how to localize the quotes for different languages.
I think the best solution would be
content: '“';
content: open-quote;
That way browsers that support open-quote
would use it and ignore the earlier content
value, while browsers that don't know what open-quote
is will ignore that line and use the first one.
精彩评论