绝对位置在块引用的伪元素中答案

【问题标题】：Position absolute in pseudo element of blockquote绝对位置在块引用的伪元素中
【发布时间】：2013-10-24 22:11:06
【问题描述】：

我一直在使用 :before 和 :after 使用一些块引用样式来在引号后面插入一些漂亮的引号。但是，伪元素的绝对位置似乎没有得到尊重。任何指针都非常感谢。

这是我使用的 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;
    }
}

【问题讨论】：

给伪元素一个background-color，然后再看定位。例如demo.
AFAIK，:before 和 :after 伪元素存在于它们的父元素之外（因此是“之前”而不是“第一”）。如果您将blockquote 包装在另一个包装器中并为该包装器提供相对定位会发生什么？
@Dai：它们相对于blockquote 定位，因为该元素是其祖先中的第一个非display: static 元素（与具有position: absolute 的其他子元素一样）。

标签： html css sass

【解决方案1】：

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

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

【讨论】：