Pseudo-elements :after and :before not appearing consistently

Question

I am creating two rectangles each with 2 colors. Rather than creating a container div and 2 seperate empty div boxes just to display color, I'm trying to use :after to overlay one box on top of another.

This is a learning process for me. So after I get it to work on the containers, I will attempt to add the two colors to :before and :after on the text objects themselves, and compare the process/results. Unfortunately I am so far unable to display the :after pseudo-elements in the container div.

Here's my prototype:

---

Here's what I've got so far:

#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;
}

Any Ideas?

Answer 1

Your before and after should have content and display attributes:

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

I'm assuming you're trying to give your elements that two-tone effect with these pseudo elements? You should consider using gradients for that. You could use a gradient generator to create them.

Answer 2

Have you tried to used content: ''; in your pseudo-elements? :after and :before