html - Blockquote引用符号在contentbox外部流血

我有一个blockquote，其中引用符号是使用CSS Content生成的，使用伪选择器：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;
}

这将生成一个如下所示的blockquote：



我想要的是使引用符号停留在其各自的框内，以使它们的基准线与blockquote内的文本相同。

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

解决它的一种方法可能是给引用符号一个相对字体大小的负边距，但是我正在寻找一个更“正确”的解决方案，或者一个关于引用符号为何如此操作的解释。

编辑：添加位置：相对； div.paragraph不能解决此问题，因为它已经具有position：relative。

最佳答案

        <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”设置为相对，这被视为内容之前和之后的父容器