代码之家 › 专栏 › 技术社区 › Paul

如何使a:before元素的open引号与div内联

css3 css html

Paul · 技术社区 · 7 年前

我正在使用 :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>

1 回复 | 直到 7 年前

user3260487 7 年前

#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;
}

将证明元素设置为相对位置。使用绝对定位放置打开和关闭引号。

推荐文章