Css 在文本前后显示引号

我正在努力在一段前后排列引用，我使用了css psuedo类内容：openquote；在前后，但由于一些奇怪的原因，对齐到处都是，我需要四倍于段落大小的引号来匹配我给出的设计，而且最后一行文本有很大的间隙，我整个上午都在玩这个，但没有成功，我写了一个代码笔来演示这个，有没有人对我如何才能做到这一点有什么建议

当在psuedo元素上增加字体大小时，引号有额外的高度，这似乎导致了问题，我为它们添加了边框来演示这一点

Lorem ipsum door sit amet，继续成为精英。多内克·奥迪奥。奎斯克·帕特·马蒂斯·厄洛斯。这是一个非常有趣的故事。苏珊迪丝·乌尔纳·尼布、维韦拉·农、森佩尔·苏西比特、波苏尔·佩德。洛雷姆·伊普苏姆·多尔·塞特·阿梅特，接连成为一位杰出的领导者。多内克·奥迪奥。奎斯克·帕特·马蒂斯·厄洛斯。这是一个非常有趣的故事。Suspendisse urna nibh，viverra non，semper suscipit，posuere a，pede

p{
字号：1.5em；
线高：1.5em；
}
p:以前{
内容：公开报价；
}
p:之后{
内容：关闭报价；
}
p:以前，
p:之后{
显示：内联；
字号：6em；
颜色：橙色；
边框：1px纯黑；
填充：0；
位置：相对位置；
顶部：.25em；
}

使用块引号 不要在引号中使用

p

标记。你应该使用标签

然后在psudo类之前和之后使用

我已经更新了你的密码笔

---

添加

显示：flex到
p
或
显示：表格到
p
和
显示：表格单元格到伪元素
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

p {
 font-size: 1.5em;
 line-height: 1.5em;
}

p:before {
 content: open-quote;
}

p:after {
 content: close-quote;
}

p:before,
p:after {
 display:inline;
 font-size: 6em;
 color: orange;
 border: 1px solid black;
 padding: 0;
 position: relative;
 top: .25em;
 }

blockquote {
    font-size: 1.5em;
    line-height: 1.5em;
}

blockquote:before {
  content: open-quote;
}

blockquote:after {
  content: close-quote;
}

blockquote:before,
blockquote:after {
  display: inline-block;
  vertical-align: bottom;
  color: orange;
  font-size: 4em;
  top: .2em;
  position: relative;
}