绝对位于blockquote的伪元素中

Question

我一直在玩一些blockquote样式使用：before和：after在引号后插入一些不错的引号。但是，伪元素的绝对位置似乎并未得到尊重。任何指针都非常感激。

请参阅：http://codepen.io/anon/pen/hylEn

这是我使用的SCSS：

$secondarycolor: #c0392b;
$silver: #bdc3c7;

blockquote {
    font-size: 2.5em;
    border-left: 10px solid $secondarycolor;
    margin-left: 30px;
    padding-left: 15px;
    position: relative;

    &:before {
        content: "\201C ";
        position: absolute;
        top: 0;
        left: 15px;
        font-size: 5em;
        color: $silver;
        z-index: -1;
    }

    &:after {
        content: "\201D";
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 5em;
        color: $silver;
        z-index: -1;
    }
}

Answer 1

：之前在您的演示中缺少position: absolute。在：之后，您只是因为增加引号上的字体大小而无法考虑增加的行高。您需要使用负底值来纠正此问题。

&:after {
    content: "\201D";
    position: absolute;
    bottom: -.65em;
    right: 0;
    font-size: 5em;
    color: $silver;
    z-index: -1;
}