伪元素 :after 和 :before 出现不一致

Question

我正在创建两个矩形，每个矩形有 2 种颜色。 我不是创建一个容器 div 和 2 个单独的空 div 框来显示颜色，而是尝试使用:after将一个框覆盖在另一个框上。

这对我来说是一个学习的过程。 因此，在我让它在容器上工作后，我将尝试将两种颜色添加到:before和:after文本对象本身，并比较过程/结果。 不幸的是，我目前无法在容器 div 中显示:after伪元素。

这是我的原型：

---

这是我到目前为止所得到的：

#aprende_heading_container {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background-color: #1b414a;
  height: 102px;
}

#aprende_heading_container:after {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 100%;
  background-color: rgba(200, 0, 0, 0.29);
}

#aprende_subheading_container {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background-color: #358394;
  height: 100px;
}

#aprende_subheading_container:after {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 100%;
  background-color: #000;
}

有任何想法吗？

Answer 1

你before和after应该有content和display属性：

#aprende_subheading_container:after {
  content:'';
  display:block;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 100%;
  background-color: #000;
}

我假设您正在尝试使用这些伪元素为您的元素提供两种色调的效果？ 您应该考虑为此使用渐变。 您可以使用渐变生成器来创建它们。

Answer 2

您是否尝试过使用content: ''; 在你的伪元素中？ :after和:before