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

Question

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

这对我来说是一个学习的过程。所以在我让它在容器上工作后，我将尝试将两种颜色添加到文本对象本身的 :before 和 :after，并比较 process/results。不幸的是，我目前无法在容器 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 for that. You could use a gradient generator 来创建它们。

Answer 2

你试过在你的伪元素中使用 content: ''; 吗？ :after 和 :before

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

Pseudo-elements :after and :before not appearing consistently

html

css

pseudo-element