伪元素选择器不起作用

Question

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.

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)...

I have a JSFiddle here of the code: https://jsfiddle.net/eliseo_d/6p9z8xr3/

HTML: <div class="elbow-1-toprt-wide0-grey1">elbow 1</div>

CSS:

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

I can't seem to figure out what I'm missing?

Anyone know what I'm missing? Thanks in advance.

Answer 1

The ::after element is being shown with the background, your problem is that div[class^='elbow-'] is set to overflow:hidden; , which is hiding the pseudo element.

Simply remove overflow:hidden;

JSFiddle Demo