title: Pseudo-elements :after and :before not appearing consistently
body: <p>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 <code>:after</code> to overlay one box on top of another. </p>
  
  <p>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 <code>:before</code> and <code>:after</code> on the text objects themselves, and compare the process/results. Unfortunately I am so far unable to display the <code>:after</code> pseudo-elements in the container div.</p>
  
  <p>Here's my prototype:
  <img src="https://i.stack.imgur.com/bamWd.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>Here's what I've got so far:
  <img src="https://i.stack.imgur.com/4r4x1.png" alt="enter image description here"></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Any Ideas?</p>