如何在伪元素上添加margin-top

Question

我正在尝试为包含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>

图像

Answer 1

您正在将::before伪元素设置为绝对位置，但是您没有在.line-top上定义position属性。因此，它将使用默认值（静态）。

您需要改用相对定位。

.line-top {
    position: relative;
    ...

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/position