如何在 Angular scss 样式表中使用 ::before？

Question

我的 scss 文件中有该代码：

#mainBox {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
}

.imageBox::before {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, #e91e63, #03a9f4);
  z-index: 99;
  mix-blend-mode: screen;
}

.imageBox {
  position: relative;
  width: 50%;
  height: 100%;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

一切都很好，但我不能让这个 ::before 工作。我正在尝试使用 ::ng-deep 但它不起作用。

编辑：

<div id="mainBox">

  <div class="imageBox">
    <img src="../assets/images/loginPageDoctor.jpg" alt="">
  </div>

  <div class="contentBox">
     Some content here
  </div>
</div>

这是我的 HTML 代码。图片和内容有两个容器。

Answer 1

它应该放在class 标记之后。在此示例中，p 是段落的标记。

  p::before {
      margin-left: 2rem;
    }