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

【问题标题】：Pseudo-elements :after and :before not appearing consistently伪元素 :after 和 :before 不一致出现
【发布时间】：2015-06-01 19:03:54
【问题描述】：

我正在创建两个矩形，每个矩形都有 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;
}

有什么想法吗？

【问题讨论】：

标签： html css pseudo-element

【解决方案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 来创建它们。

【讨论】：

感谢您的回答。关于渐变：好主意！谢谢！

【解决方案2】：

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。
是的，我试图对他的帖子发表评论，但我没有足够的声誉来评论。谢谢！