我正在尝试为包含CSS伪元素的标题添加页边空白。
当尝试将我的边距添加到顶部时,伪元素(文本上方的行)嵌套在我的边距内。如何在上面添加边距。
CSS
.line-top{
font-size: 32px;
font-weight: 200;
padding: 30px 0;
letter-spacing: 2px;
margin-top:5rem;
&::before{
position: absolute;
display: inline-block;
content: '';
background:
linear-gradient(
to left,
$orange 0,
$orange 50.00%,
$teal 50.00%,
$teal )no-repeat;
height: 4px;
width: 190px;
top: 15px;
}
}
HTML
<h3 class="line-top">ME Text Title </h3>
图像
答案 0 :(得分:1)
您正在将::before
伪元素设置为绝对位置,但是您没有在.line-top
上定义position属性。因此,它将使用默认值(静态)。
您需要改用相对定位。
.line-top {
position: relative;
...
文档:https://developer.mozilla.org/en-US/docs/Web/CSS/position