::使用後のCSSが以下になりません

Question

私は紛失しているものがありますが、::afterを私のCSSに使用しようとしていますが、残念ながら動作しません。

私のCSSコードは以下のとおりです。

.test { 
 
    height: 40px; 
 
    width: 40px; 
 
    background: #444; 
 
} 
 
.test::after { 
 
    position: relative; 
 
    top: 15px; 
 
    height: 240px; 
 
    width: 240px; 
 
    background: red; 
 
}

<div class="test"></div>

Answer 1

あなただけのクラスを擬似するcontent: ''を追加必要があります後、または：前と絶対に位置を設定します。

.test { 
 
    height: 40px; 
 
    width: 40px; 
 
    background: #444; 
 
    position:relative; 
 
} 
 
.test:after { 
 
    position: absolute; 
 
    top: 15px; 
 
    height: 240px; 
 
    width: 240px; 
 
    background: red; 
 
    content: '' 
 
}

<div class="test"></div>

しかし、あなたは絶対なしでそれを使用することができますしたい場合は疑似クラスは、親ノードの内部のように生成するので、ちょうど、それにいくつかのフロートを追加します。

.test { 
 
    height: 40px; 
 
    width: 40px; 
 
    background: #444; 
 
    position:relative; 
 
} 
 
.test:after { 
 
    content: ''; 
 
    background: red; 
 
    width: 10px; 
 
    height: 10px; 
 
    float: right; 
 
    
 
}

<div class="test"></div>

しかし、あなたがより良い方法、絶対にそれを使用するブロックの内側に、アイコンのようにそれを使用する必要がある場合。