擬似要素セレクタが動作しない

Question

私は、サイズをスケーリングできる動的要素を持っています。その位置は画面のどこにでも配置できます。私は基本的に "肘"セクションを作成しようとしています。

右腕のエクステンションアームが必要なのは...面白いのは、位置とサイズが正しいのに、なんらかの理由で疑似要素がグレーに現れないということです。 m個の呼び出し...

を（ただし、グレー同様に、正確なサイズと位置で要素を強調表示要素インスペクタを示す添付画像を参照）私はここにコードのJSFiddleを有します。 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); 
} 

私が欠けているかを把握するように見えることはできませんか？

誰かが迷っていることを知っていますか？前もって感謝します。

Answer 1

::after要素がバックグラウンドで表示されていますが、div[class^='elbow-']が擬似要素を非表示にしてoverflow:hidden;に設定されているという問題があります。

単にoverflow:hidden;

JSFiddle Demo