如何给伪元素加上margin-top

Question

我正在尝试为包含 css 伪元素的标题添加边距顶部。

尝试添加我的 margin-top 时，伪元素（文本上方的行）嵌套在我的边距内。我怎样才能在上面添加边距。

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 pseudo-element 设置为绝对定位，但您并未在 .line-top 上定义属性位置。因此它将使用默认值（静态）。

您需要改用相对定位。

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

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

如何给伪元素加上margin-top

How to add margin-top to pseudo elements

html

css

margin

pseudo-element