html - 如何获得 :before element open-quote to be inline with div

Question

我正在使用 :before 元素来输出一个开闭引号。我遇到的一个问题是开引号周围的空白量。我不确定是 display 元素还是 line-height 导致了这个……或者两者都不是。

我将显示设置为内联思维，这会有所帮助。我还将开引号的行高设置为 0%。

有谁知道我怎样才能让开引号直接与 testimonial 元素内联？即使引文与内容有些重叠，也没关系。

#testimonial:before {
	content: open-quote;
	display: inline;
	color: #000;
	font-size: 10rem;
	z-index: -1;
	margin-right: 25px;
	line-height: 0%;
}
#testimonial:after {
	content: close-quote;
	display: inline-block;
	color: #000;
	font-size: 3rem;
}

<h3 class="hG" id="testimonialTitle">Customer Testimonial</h3>
<p class="dGw" id="testimonial">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 1

#testimonial{
    position: relative;
    padding-left: 15px;
}
#testimonial:before {
    content: open-quote;
    display: inline;
    color: #000;
    font-size: 30px;
    z-index: -1;
    margin-right: 0;
    line-height: 1;
    position: absolute;
    top: -10px;
    left: 0;
}
#testimonial:after{
    content: close-quote;
    display: inline-block;
    color: #000;
    font-size: 30px;
    line-height: 1;
}

将证明元素设置为相对位置。使用绝对定位放置开盘价和收盘价。