Css 引用伪元素don'；t在元素填充内均匀对齐

我设计了一个

blockquote

样式，通过CSS伪元素添加开头和结尾引号，但它们在元素的填充区域内水平居中，所以结尾引号通常会出现在离文本更远的地方。在我的项目中，它们的分布略有不同，因此也有点不一致。如何修复/改进此问题

<div class="big-quote">
  <blockquote>This is a styled quote.</blockquote>
</div>


.big-quote {
  overflow: hidden;
  padding: 0;
  width: 30%;
}
.big-quote blockquote {
  position: relative;
  margin: 0.5em;
  padding: 0.5em 2em 0.5em 2em;
  text-align: center;
  line-height: 1.25;
  font-family: serif;
  font-size: 2.444444444em;
  font-style: italic;
}
.big-quote blockquote::before, .big-quote blockquote::after {
  position: absolute;
  line-height: 1;
  font-size: 5em;
  color: #adadad;
}
.big-quote blockquote::before {
  content: "\201C";
  top: 0;
  left: 0;
}
.big-quote blockquote::after {
  content: "\201D";
  right: 0;
  bottom: -0.5em;
  float: right;

这是一个风格化的引用。
.大报价{
溢出：隐藏；
填充：0；
宽度：30%；
}
.大报价大报价{
位置：相对位置；
边缘：0.5em；
填充：0.5em2em 0.5em2em；
文本对齐：居中；
线高：1.25；
字体系列：衬线；
字体大小：2.444em；
字体：斜体；
}
.big quote blockquote:：之前，.big quote blockquote:：之后{
位置：绝对位置；
线高：1；
字号：5em；
颜色：#adadad；
}
.big quote blockquote:：之前{
内容：“\201C”；
排名：0；
左：0；
}
.big quote blockquote:：之后{
内容：“\201D”；
右：0；
底部：-0.5em；
浮动：对；

}

---

演示：

问题在于引号放错了位置，这是由于块引号占用了太多的宽度（即不限于其文本的宽度），因此引号可能与实际文本相差很远

在这段代码中，我做了一些修改——请参见代码中的注释

。大引号{
溢出：隐藏；
填充：0；
宽度：60%；
文本对齐：居中；
显示器：flex；
证明内容：中心；
位置：相对位置；
}
.大报价大报价{
位置：相对位置；
边缘：0.5em；
填充：0.5em 2.6em 0.5em 2.6em；/*增加，以便为填充中的引号留出空间*/
文本对齐：居中；
线高：1.25；
字体系列：衬线；
字体大小：2.444em；
字体：斜体；
宽度：自动；/*已添加*/
/*边距：0自动0自动；删除以支持flex，因为无法使用%宽度*/
最大宽度：70%；/*已添加，以便为报价留出空间。计算可以，但不允许*/
}
.big quote blockquote:：之前，.big quote blockquote:：之后{
位置：绝对位置；
线高：1；
字号：5em；
颜色：#adadad；
填充：0；
保证金：0；
}
.big quote blockquote:：之前{
内容：“\201C”；
排名：0；
左：-0.1米；
}
.big quote blockquote:：之后{
内容：“\201D”；
右：0.1米；
底部：-0.5em；
}
/*这只是一个提醒，提醒您为较小的设备做一些事情，因为大字体不适合*/
@介质（最大宽度：500px）{
.大报价大报价{
字号：1em；
}
}

这是一个风格化的引用。

在现实生活中，大引号（或其他包含元素）的宽度是如何设置的？如果它很宽，两个引号可能与实际文本有很长的距离。开头引号和文本的重叠（就像你的代码笔一样）是你想要的两个引号的效果吗？对不起，我刚才看到了这个。我希望引号将集中在

块引号的填充中，或者与文本最接近的边齐平。如果我看一下你的答案，结束语是这样的，但开头离正文更远。如果我把你的代码放在我的项目中，两个引号都远离文本（开头也离得更远），文本也不再居中。谢谢你的帮助啊，我想这意味着你项目中的其他东西正在设置我们在这里使用的东西。虽然我现在意识到我只是假设了一个位置，但我会看看填充中的对齐方式。在我的项目中，
。大引号
只包含在一个
部分
，带有页边距，然后是
main
。