html - 绝对位置在块引用的伪元素中

Question

我一直在使用 :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您的演示中缺少 :before 。在 :after 上，您只是没有考虑增加引号字体大小而增加的行高。您需要使用负的底部值来纠正此问题。

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