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

Question

我一直在使用 :before 和 :after 尝试一些 block 引用样式，在引用后面插入一些漂亮的引号。然而，伪元素的绝对位置似乎没有得到尊重。非常感谢任何指点。

参见: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

演示中缺少 :before position:absolute。在 :after 上，您只是没有考虑到因增加引号中的字体大小而增加的行高。您需要使用负底值来纠正此问题。

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