在html css中设计的大引号

如何用这些巨大的引号来设定引号？

我尝试过在线显示的大部分示例.使用带有：before和：after css样式的块引用.由于响应性的原因,我遇到的问题是避免在div中使用图像.我也在使用Twitter Bootstrap框架.

html中的引用：

ness,someone once made a courageous decision. ~Peter F. Drucker

和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;
}

问题就是看起来像这个例子.虽然响应性确实有点工作.引号不是彼此对角放置的

最佳答案

虽然在阅读你的问题后我不清楚,但我想你想改变引号的形状.

选择一个合适的unicode value并添加一个引号属性.例如.

blockquote {
    border:none;
    font-family:Georgia,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;
  
}

ness,someone once made a courageous decision. ~Peter F. Drucker

您可能还想更改font-family,因此引号的形状更适合您的需求.

这是jsfiddle.