가짜 요소 선택기가 작동하지 않습니다.

크기를 조절할 수있는 동적 요소가 있으며 위치는 화면의 아무 곳에 나 배치 할 수 있습니다. 기본적으로 "팔꿈치"섹션을 만들려고합니다.가짜 요소 선택기가 작동하지 않습니다.

"팔꿈치"가 필요로하는 것은 오른쪽 상단의 확장 팔입니다 ... 재미있는 점은 위치와 크기가 올바르지 만, 어떤 이유로 擬似 요소가 회색으로 나타나지 않습니다. m 호출 ...

을 (아닌 회색 동일의 정확한 크기와 위치의 요소를 강조 요소 속성을 나타내는 첨부 된 이미지 참조) I 여기서 코드 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); 
}

내가 누락 무엇인지 알아낼 수없는 이유는 무엇입니까?

누구나 내가 아는 바를 알고 계신가요? 미리 감사드립니다.

출처

2016-07-04 Eliseo d' Annunzio