html - Blockquote 引用符号在内容框外流血

Question

我有一个 block 引用，其中引用符号是使用 CSS 内容生成的，使用伪选择器 :before 和 :after 就像这样:

div.paragraph blockquote::before, div.paragraph blockquote::after {
    font-size: 4em;
    color: #999;
    position: absolute;
}

div.paragraph blockquote::before {
    content: "“201C";
    top: 0;
    left: 0;
}

div.paragraph blockquote::after {
    content: "”201D";
    bottom: 0;
    right: 0;
}

这会生成一个如下所示的 block 引用:

我想要的是让引用符号保留在各自的框中，以便它们的基线与 block 引用内的文本相同。

我认为这与引文符号自然基线有关，但也许有人可以详细说明？

修复它的一种方法可能是为引用符号提供其相对字体大小的负边距，但我正在寻找更“正确”的解决方案，或者解释为什么引用符号会这样。

编辑:添加position:relative；到 div.paragraph 并不能解决这个问题，因为它已经有了 position:relative。

Answer 1

        <style>
        div.paragraph{
        width:50%;
        margin:auto;
        }
        div.paragraph blockquote{
        position:relative;
        }
        div.paragraph blockquote::before, div.paragraph blockquote::after {
            font-size: 4em;
            color: #999;
        }

        div.paragraph blockquote::before {
            content: "“";
            top:-0.4em;
            left: -0.6em;
            position: absolute;

        }

        div.paragraph blockquote::after {
            content: "”";
            right: 0;
            position: absolute;
        }
        </style>

        <div class='paragraph'>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        <blockquote>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </blockquote>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 

       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
</div>

看来你需要将“div.paragraph blockquote”设置为相对的，它被视为前后内容的父容器