伪元素：之后和：不一致地出现之前

Question

我正在创建两个矩形，每个矩形有两种颜色。我没有创建一个容器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;
}

我假设你试图用这些伪元素给你的元素带来双色调效果？您应该考虑使用gradients。您可以使用gradient generator创建它们。

Answer 2

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