Question

你好！我需要一些CSS帮助样式化我的blockquote规则。我想要的结果是在引用的文本上面有开头的引用，在引用的文本下面有结束引用。

此图片完全说明了我的要求 - site design

这是我当前的实时在线链接 - Live link

我的CSS：

blockquote {
color: #e33e00;
font-style: italic;
font-family: GeoSlb712XBdBT;
padding:20px;
padding-left: 15px;
border-left: 3px solid #F63;


}

blockquote p:before {
content: '"';
font-size: 30px;
top:20px;
position:absolute;

}

blockquote p:after {
content: '"';
font-size: 30px;
}

如果有人可以提供帮助，我将非常感激。

Answer 1

DEMO

查看我添加的代码（它缩进了4个空格）

您需要将position: relative;添加到blockquote p，然后在:before和:after移动:before 15px和:after下降30px。

调整右侧的大小以使报价增长和缩小，并看到报价始终保持在顶部和底部

当然，您可以像20px和35px（或更多）那样在引号和引用的<p>之间添加更多空格。

编辑：添加了以下代码，修复问题的其他代码缩进了8个空格

blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
    padding:20px;
    padding-left: 15px;
    border-left: 3px solid #F63;
}


        blockquote p { position: relative; }

blockquote p:before {
content: '"';
font-size: 30px;
position:absolute;
        top:-15px;
        left:0px;
}

blockquote p:after {
content: '"';
font-size: 30px;
        position:absolute;
        bottom:-30px;
        left:0px;
}

Answer 2

像这样http://www.visibilityinherit.com/code/css-blockquotes-how-to.php。或者使用显示内联块与另一个。我试图发布代码，但显然无法正确缩进。

如何在css中定位和设置blockquote

2 个答案: