我正在尝试制作一个带有尾条的标题。我使用了伪元素CCD_ 1。
我的问题是标题的背景色应该"遮挡"::after
元素中位于标题本身"下方"的部分,但它没有。
HTML:
<div>
<h3>TEST</h3>
<p>blah blah blah blah blah blah blah blah blah blah blah</p>
<h3>TEST 2</h3>
<p>blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
CSS:
body{
font-size: 0.9em;
font-family: Arial;
}
div{
width: 300px;
margin: 0 auto;
}
h3{
font-size: 200%;
background-color: hsl(0, 0%, 100%);
margin: 0px;
display: inline-block;
padding-right: 20px;
}
h3::after{
content: '';
display: block;
width: 300px;
height: 1.3rem;
background: hsl(200, 30%, 20%);
margin-top: -1.7rem;
}
jsFiddle
只需将文本包装在span
元素中就会简单得多(并支持更广泛的浏览器):
<h3><span>TEST</span></h3>
然后给h3
元素一个具有所需背景颜色的block
显示器,然后给span
元素一个覆盖颜色为的inline-block
显示器
h3{
font-size: 200%;
background: hsl(200, 30%, 20%);
margin: 0px;
display: block;
padding-right: 20px;
}
h3 span {
background: hsl(0, 0%, 100%);
display: inline-block;
}
JSFiddle演示。
然后,您可以通过为span
元素提供所需的padding
来抵消这一点。
绝对定位伪元素。。。它也是更干净的css。
JSfiddle演示
CSS
body{
font-size: 0.9em;
font-family: Arial;
}
div{
width: 300px;
margin: 0 auto;
}
h3{
font-size: 200%;
background-color: hsl(0, 0%, 100%);
margin: 0px;
position: relative;
overflow: hidden;
}
h3::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
margin-left: 20px;
background: hsl(200, 30%, 20%);
}