用 <blockquote> 做大引号

Posted 2023-02-18

【中文标题】用 <blockquote> 做大引号

【英文标题】：Make big quotes with <blockquote>

【发布时间】：2013-04-25 21:30:12

【问题描述】：

几年前，我使用该标签在我的网站上创建了一个引用（带有大引号）。

现在我想做同样的事情，但它不再起作用了。我唯一得到的是小“”而不是大的。

如何找回旧的、大的？

谢谢！

【参考方案1】：

我相信您正在寻找这样的东西：

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: "\201C";
    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: "\2014 \2009";

将代码扔进一个JSFiddle for you to play with。

从http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/找到一个关于它的教程

【讨论】：

太棒了！我试图以另一种方式修复它，但这更好。谢谢，真的，谢谢！

【参考方案2】：

这是一个纯 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: "\201C";

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: "\201D";

blockquote footer 
    padding: 0 2em 0 0;
    text-align:right;

blockquote cite:before 
    content: "\2013";

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