块引用引用符号在内容框外出血

Question

我有一个块引用，其中引用符号是使用 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;
}

这会生成一个如下所示的块引用：

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

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

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

编辑：添加位置：相对； to 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”设置为相对，它被视为前后内容的父容器

Answer 2

好的，我明白你的问题，你要做的就是添加 css：

div.paragraph {position:relative; }

这定义了它的子元素的上下文