html css 中的大引号答案

【问题标题】：Big Quotation marks styled in html csshtml css 中的大引号
【发布时间】：2014-12-11 15:11:33
【问题描述】：

我将如何使用那些巨大的引号来设置引用的样式？

我已经尝试了大多数在线显示的示例。将块引用与 :before 和 :after css 样式一起使用。由于响应性，我遇到的问题是避免在 div 中使用环绕文本的图像。我也在使用 Twitter Bootstrap 框架。

html 中的引用：

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

还有css：

blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before { 
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
} 
blockquote h3:after { 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
}

问题看起来像这个例子。尽管响应能力确实起作用。引号不是彼此对角放置的

【问题讨论】：

您说您不想使用图像“因为响应性”，但您使用固定大小（即非响应性）字体大小作为引号。下定决心！
我不确定您的示例有什么问题，它似乎工作得很好。
您真正想要实现什么，因为从我的角度来看，您的示例实际上正是您想要做的？请尝试解释
@NiettheDarkAbsol 虽然它的反应很好。它的样式让它看起来和图像一模一样，这让我很难过
@AndyReimann 该代码似乎确实可以正常工作。问题在于样式部分。我没有得到图片中想要的最终结果。

标签： html css twitter-bootstrap blockquote

【解决方案1】：

虽然阅读您的问题后不清楚，但我猜您想更改引号的形状。

选择一个合适的unicode value 并添加一个quotes 属性。例如

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote h3 {
font-size:21px;
}

blockquote h3:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote h3:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
  
}

<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

您可能还想更改font-family，使引号的形状更适合您的需求。

这里是jsfiddle。

【讨论】：

【解决方案2】：

引号不是彼此对角放置的

所以只需定位它们：

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

或者喜欢这个演示：http://jsfiddle.net/pz6kx0bw/

【讨论】：

这很好用，谢谢。我使用了你的建议，使用了位置属性