html - 在 html css 中设置样式的大引号

Question

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

我已经尝试了网上显示的大部分示例。在 :before 和 :after css 样式中使用 block 引用。我遇到的问题是避免在 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;
}

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

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