div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }
私の構文は間違っていますか、それとも疑似要素内の疑似要素はサポートされていませんか?
疑似要素については認識してい::after
ますが、達成するには別の疑似要素内に実際の要素が必要です。たとえば、::after
十分でない場所は次のとおりです。
div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }
::after
は要素に対して相対的であり、 ではありません::before
。