简单漂亮的块引用样式 | CSS-Tricks

块引用在符合标准的浏览器中显示“前面的大引号”效果，在 IE 中显示粗的左侧边框和浅灰色的背景。
与其他块引用技巧不同，此样式不需要嵌套的块级元素（如 p）。因此，它将段落转换为内联样式元素，以防止内容下降到引号下方。

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

示例

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Dyllon

# 2009年9月13日

我只希望它在结尾处有一个结束引号。

sixtyten

评论永久链接# 2014年9月15日

你可以使用 blockquote:after…
Bob

评论永久链接# 2015年1月5日

这里你在结尾处有一个结束引号 https://css-tricks.org.cn/examples/Blockquotes/

Dyllon

# 2009年9月21日

取消那条…

Jared

# 2009年10月13日

这会是什么样子？

Dan Sensecall

# 2009年10月18日

非常感谢这个！

Nipperkin

# 2010年3月15日

就我个人而言，我认为使用垂直线*和*引号是多余的，因为它们都表示相同的意思。

Dez

# 2010年11月1日

这在 chrome/safari 中似乎不起作用。

Dez

# 2010年11月1日

…如果你想让它在 Safari/Chrome 中起作用。

blockquote:before {

content:”\201C”;

}

blockquote:after {

content:”\201D”;

}

Wolf

# 2010年11月17日

一个接一个地使用多个块引用似乎会导致第一个实例在前面有双引号，但每个后续实例在前面只有一个单引号（在 Firefox 中）。为什么会这样？

Efrain

评论永久链接# 2011年6月16日

遇到了同样的问题。我该如何解决？

谢谢
Ivan

评论永久链接# 2013年8月1日

是的，遇到了同样的问题。我尝试了上面评论中那个家伙说的方法。它解决了问题！
Andrew

评论永久链接# 2014年4月28日

看起来是因为 quote 属性中的第 3 和第 4 个参数。
来自：https://w3schools.org.cn/cssref/pr_gen_quotes.asp

quote: string string string string
指定使用哪个引号。前两个值指定第一级引号嵌套，接下来的两个值指定下一级引号嵌套，依此类推。

因此，如果你没有关闭引号，它将使用第 3 个参数。

我将其更改为 quotes: "\201C""\201D";，它为我修复了问题。

干杯

kathy

# 2011年1月17日

结束引号的
代码是什么？

kathy

# 2011年1月17日

解决了

blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}

只需要稍微调整一下间距 :)

kathy

# 2011年1月17日

抱歉我拼写很糟糕！

最终

blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-left: .20em;vertical-align:-.4em;}

感谢 Chris 的精彩提示 :)

Charlie

# 2011年8月13日

什么是

quotes:"\201C""\201D""\2018""\2019";

在 blockquote 上？
如果你在 :before 和 :after 上指定 \201C 和 \201D，你似乎不需要它。

我错过了什么吗？

Brad Czerniak

# 2011年8月17日

大家好，作为原始代码提交者，我只是想跟进并解决评论中提到的一些弱点。以下是一些我认为改进的 css


blockquote{background:#f9f9f9;border-left:1em solid #eee;margin:1.5em 1em;padding:.5em 1em;quotes:"\201C""\201D";}
       blockquote:before{color:#808080;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}
       blockquote :first-child{display:inline;}
       blockquote :last-child{margin-bottom:0;}

Ren

评论永久链接# 2014年5月3日

我本来想提一些与你（即第一个和最后一个子元素）相同的更改，Brad，但后来我注意到了你的评论。好的建议。我只会补充一点，设置 :first-child 为 inline-block 以保留底部边距可能是一个好主意。
Emnem

评论永久链接# 2014年5月4日

内联块使起始引号显示在第一行的上方和左侧。我自己也正在寻找这个问题的答案，因为在多段落引用上保留内联样式（无需将其修改为内联块）会导致第一段落直接位于下一段落之上。非常奇特的定位问题（至少在 Fx32/33 Nightly 中）。
Bob Jones

评论永久链接# 2020年6月10日

Brad，此更新在 Safari 中效果很好，但在 Chrome 和 Firefox 中却完全不起作用。

有没有办法让此样式在这些浏览器中显示？

谢谢！

jenn

# 2012年7月16日

这在 chrome 中似乎不起作用。

David Darnes

# 2012年7月25日

非常有用的参考！如果有人想知道为什么只有他们的第一个块引用有双引号，而后续的块引用没有，你只需要添加

blockquote:after {
content: no-close-quote;
}

Voytek

# 2012年9月6日

你好，

如何添加阴影？
谢谢

Praveen Puglia

评论永久链接# 2012年11月23日

https://css-tricks.org.cn/snippets/css/css-box-shadow/ – 查看这个 :)

Praveen Puglia

# 2012年11月23日

非常简单和酷！谢谢 Chris！

Mesaber

# 2013年1月16日

谢谢，帮了我很大的忙 :)

Derek

# 2013年5月15日

有人知道如何修改 css 以便在块引用中段落之间留有空格吗？感谢任何帮助。

Stephan

评论永久链接# 2013年7月7日

blockquote p{
margin:15px 0;
}
Sam

评论永久链接# 2017年11月5日
使用以下方法解决了“多个段落之间没有空格”的问题
```
blockquote p:not(:last-child) {
  float: left;
}
```

WindyLiu

# 2013年6月21日

非常漂亮的样式！

Eric B

# 2013年9月10日

演示页面链接失效了！

Sudeep B

# 2013年9月20日

@css-trick @David Darnes

不错。

Don

# 2013年9月26日

问候 - 对代码进行了一些修改，使它对我来说有效 :-)

blockquote {
  margin: 1.5em 0 1.5em;
  padding: 0 1em 0 2.5em;
  position:relative;
}
blockquote:before
 {
  color: #ccc;
  content: "\201C";
  font-size: 5em;
  position:absolute;
  left:5px;
  top: 0.3em;
  line-height: 0.1em;
}

blockquote:after
 {
   color: #ccc;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:3px;
  bottom: 0em;
  line-height: 0.1em;
}

重要的部分 - 我在两侧都有填充。将 blockquote 元素设置为 position:relative 意味着你可以将 blockquote:before 和 blockquote:after 设置为 position:absolute，然后使用 left、right、bottom 和 top 来定位引号。

Rick

评论永久链接# 2013年11月5日

Don，文本与右侧的结束引号符号重叠（FF v25）。

将右侧填充从 1em 更改为 2.5em 可以解决此问题。

padding: 0 2.5em 0 2.5em

感谢大家的帮助！

Daniel

# 2013年12月28日

简洁明了！你只是漏了一个冒号 (:)
blockquote p { display: inline; }

Chris Coyier

评论永久链接# 2013年12月28日

谢谢

Jacky Liang

# 2014年2月17日

对于 before 元素，vertical-align 阻止了文本被选中。我花了一段时间才解决这个 bug，但我认为现在可以正常工作了。

display:inline-block;color:#FFF;height:25px;font-size:2.8em;line-height:80px;content:'\201F';letter-spacing:-2px;float:left;position:relative;right:8px

Steven Fromm

# 2014年3月8日

如果我不太理解上面的 CSS 内容，有没有更简单的方法让引号看起来更美观？我担心我理解不了。

Torsten

评论永久链接# 2014年3月17日

你可以将块引用样式设置为斜体，就像这样

blockquote {
font-style: italic;
}

Abhimanyu

# 2014年6月13日

blockquote:before 是什么作用？

Karissa

# 2014年9月15日

谢谢！我在评论中了解了我需要的内容。我一直很困扰，为什么只显示第一个引号，而不是两个。

我稍微调整了一下上面的代码，并添加了紫色。

blockquote {
    background-color: #9786c6;
    border-left: 1em solid #5236a0;
    margin: 1.5em 0 1.5em;
    padding: 1em 1.5em 0 2.5em;
    position: relative;
}
blockquote:before {
  color: #392570;
  content: "\201C";
  font-size: 5em;
  position:absolute;
  left:5px;
  top: 0.6em;
  line-height: 0.1em;
}

blockquote:after {
   color: #392570;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:3px;
  bottom: 0em;
  line-height: 0.1em;
}

看看它们在 http://meetkarissa.com/sleepphones 上的效果。

bob

# 2015年1月2日

你在 Chrome 中尝试过选择该示例中的文本吗？

Noemi

# 2015年1月29日

感谢这份教程！这正是我需要的。
如何使逗号更大？

Uday Khandelwal

# 2015年5月17日

我对第一篇文章有一个疑问，我无法使我的文本显示为内联。
是 blockquote p{
display : inline;
}

用于

HTML 中的文本。

我的 HTML 代码如下

“我们是由我们反复做的事情塑造的。因此，卓越不是一种行为，而是一种习惯。”——亚里士多德

Pawan

# 2015年7月11日

大家好，

看看这个..

简单而精彩……..

.tmls_text:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}

One9ooh6

# 2015年8月4日

不幸的是，这在 Internet Explorer 中不起作用。

# 2015年12月6日

试试这个 - 我已经在大多数浏览器中测试过它，并且不会导致它们崩溃，只需要进行一些小的美学调整。

blockquote {
  background: #f5f5f5;
  font-size: 1em;
  border-left: .7em solid #ccc;
  margin: 1em .5em;
  padding: .1em 1em;
  line-height: 1.2em;
  quotes: "\201C""\201D";
}

blockquote:before {
  font: Georgia;
  color: #808080;
  content: open-quote;
  font-size: 4em;
  line-height: 0;
  vertical-align: -.41em;
  padding: 0 .1em 0 .1em;
  }

blockquote:after {
  font: Georgia;
  color: #808080;
  content: close-quote;
  font-size: 4em;
  line-height: 0.3em;
  margin-right: 0.25em;
  vertical-align: -0.57em;
  padding: 0 0 0 .1em
}

blockquote:first-child {
  display: absolute;
  padding-top: 1.3em;
}

blockquote:last-child {
  display: absolute;
 }

Keith

评论永久链接# 2016年2月1日

完美！谢谢！

Reza

# 2016年2月1日

如果它对您不起作用，您可能需要更改字体。只需使用另一个字体或简单地将其删除，如下所示：font-family: none !important;

Liam

评论永久链接# 2016年5月18日

无需使用 !important - 这只应在极少数情况下使用。

此外，“none”不是 font-family 属性的有效值。 https://w3schools.org.cn/cssref/pr_font_font-family.asp

drmyersii

# 2016年2月29日

嘿，Chris。只想告诉你，你显示双引号的方式存在一个小问题。如果你想确保后续的块引用不是设置为单引号，你需要添加以下内容

blockquote:after
{
    content: no-close-quote;
}

这将确保块引用仍然按预期工作，但不会影响后续的块引用。感谢这篇文章，希望你能更新这些信息！

Brittney

# 2016年6月1日

如何删除垂直线？

Reza

评论永久链接# 2016年6月1日

Brittney，尝试删除以下这行：border-left: 10px solid #ccc;

Susan Taunton

# 2016年7月13日

非常棒 - 而且有效。谢谢！

Sezer

# 2017年1月1日

非常有用的 CSS 设计。谢谢。

Astrid

# 2017年4月6日

你好，

我试图让结束引号出现在“cite”标记内的文本之前。我遇到了困难，任何帮助或提示都将不胜感激。

使用我所使用的定位效果不好，因为定位是从块引用的底部计算的（其中块引用 = 引文文本 + cite），这意味着，当“cite”标记内的文本很长 *并且*显示引文的屏幕很窄 *时*，结束引号会出现在“cite”标记内文本的右侧，而不是其上方（以及引文本身的右下方）。

我尝试过上面的代码，但它对我不起作用。
我目前的代码如下
blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote p:first-child:before, blockquote p:first-child:after { display: block; font-size: 80px; position: absolute; color: #7a7a7a; } blockquote p:first-child:before { content: "\201C"; left: -7px; top: -25px; } blockquote p:first-child:after { content: "\201D"; right: 10px; bottom: -10px; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; text-align: right; } blockquote cite:before { content: "\2014 \2009"; }

非常感谢您提前提出的想法。

Ben

# 2017年12月16日

blockquote:after {
  color: #eee;
  content: close-quote;
}

Ankit Bishnoi

# 2019年2月19日

谁能给我一个好看的块引用样式？因为我不懂代码……

Claim Andro

# 2019年7月18日

我们如何塑造/创建自己的开头引号？

Rob Levin

# 2020年6月10日

如果你不想要结束引号，但也不希望浏览器从双开头引号切换到单开头引号，因为它认为你是在一个打开的块引用块中，例如，对于后续的块引用，你可以关闭它们，而无需使用以下方式进行视觉显示

blockquote:after {
  content: no-close-quote;
}

mvsx

# 2020年9月3日

非常有用的提示和指南。感谢分享！

示例

评论

发表评论 取消回复

发表评论取消回复