Html 用 <blockquote> 做大引号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16325687/
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
Make big quotes with <blockquote>
提问by Matt
Some years ago, I used the tag to create a quote on my site (with big quotation marks).
几年前，我使用该标签在我的网站上创建了一个引用（带有大引号）。
Now I want to do the same thing, but it doesn't work anymore. The only thing I get are small "" and not the big ones.
现在我想做同样的事情，但它不再起作用了。我唯一得到的是小“”，而不是大的。
How do I get the old, big ones back?
我如何找回旧的、大的？
Thanks!
谢谢！
回答by EnigmaRM
I believe you're looking for something like this:
我相信你正在寻找这样的东西：
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "1C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "14 09";
}
Threw the code into a JSFiddle for you to play with.
将代码扔到JSFiddle 中供您使用。
Found a tutorial about it from: http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/
从以下位置找到了有关它的教程：http: //www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/
回答by Baodad
Here's a pure CSS solution that adds both an large opening quote and large closing quote at the bottom right:
这是一个纯 CSS 解决方案，它在右下角添加了一个大的开头引用和一个大的结尾引用：
blockquote {
font-family: Georgia, serif;
position: relative;
margin: 0.5em;
padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
font-family: Georgia, serif;
position: absolute;
font-size: 6em;
line-height: 1;
top: 0;
left: 0;
content: "1C";
}
blockquote:after {
font-family: Georgia, serif;
position: absolute;
/* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
float:right;
font-size:6em;
line-height: 1;
right:0;
bottom:-0.5em;
content: "1D";
}
blockquote footer {
padding: 0 2em 0 0;
text-align:right;
}
blockquote cite:before {
content: "13";
}<div>
<blockquote>
It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat.
<footer>
<cite>
Teddy Roosevelt
</cite>
</footer>
</blockquote>
</div>