title: Pseudo element selector not working
body: <p>I have a dynamic element which will be capable of scaling in size, its position could be placed anywhere on the screen. I'm basically trying to create an "elbow" section.</p>
  
  <p>What this "elbow" needs is an extension arm at the top right... Funny thing is, while I have the position and size correct, for some reason, the pseudo element is not showing up in the grey I'm calling... (see attached image showing Element Inspector highlighting the element in the correct size and position, but not in the same grey)...</p>
  
  <p><a href="https://i.stack.imgur.com/jxN0h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jxN0h.png" alt="enter image description here"></a></p>
  
  <p>I have a JSFiddle here of the code: <a href="https://jsfiddle.net/eliseo_d/6p9z8xr3/" rel="nofollow noreferrer">https://jsfiddle.net/eliseo_d/6p9z8xr3/</a></p>
  
  <p>HTML: 
  <code>&lt;div class="elbow-1-toprt-wide0-grey1"&gt;elbow 1&lt;/div&gt;</code></p>
  
  <p>CSS:</p>
  
  <pre><code>html {
    background-color: rgb(0,0,0);
  }
  
  body {
    margin: 5px;
  }
  
  div[class$='-grey1'] {
    background-color: rgb(102,102,102);
  }
  
  div[class^='elbow-'] {
    /* default settings */
    color: rgb(0,0,0);
    font-size: 14pt;
    height: 14px;
    margin-bottom: 4px;
    margin-right: 4px;
    overflow: hidden;
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    text-transform: uppercase;
    width: 84px;
    position: relative;
  }
  
  div[class^='elbow-1-'] {
    padding-top: 46px;
  }
  
  /* Initial curve */
  div[class^='elbow-'][class*='-toprt-'] {
      border-top-left-radius: 42px;
  }
  
  /* elbow bar */
  div[class^='elbow-'][class*='-toprt-']:after {
    content: '';
      height: 30px;
      left: 104px;
      top: 0;
      position: absolute;
  }
  div[class^='elbow-'][class*='-wide0-']:after {
      width: 21px;
  }
  div[class^='elbow-'][class*='-wide0-'][class$='-grey0']:after {
    background-color: rgb(51,51,51);
  }
  div[class^='elbow-'][class*='-wide0-'][class$='-grey1']:after {
    background-color: rgb(102,102,102);
  }
  </code></pre>
  
  <p>I can't seem to figure out what I'm missing?</p>
  
  <p>Anyone know what I'm missing? Thanks in advance.</p>