とDIVする第二の要素を追加します。

Question

こんにちは後、私は次のdiv要素を持っている：

.box { 
 
    width: 100px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: blue; 
 
}

<div class="box"></div>

私は疑似クラスafterで.boxに2つ目のdivを追加したいと思います。私はそれがこのように動作すると思ったが、何も起こらない。それは次のようになります。

方法afterでこれを行うには？

ありがとうございました。

Answer 1

この

.box { 
 
    width: 100px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    display:block; 
 
    float:right; 
 
}

<div class="box"></div>

Answer 2

コードは正しいですが、唯一欠けているのはその要素へのプロパティ表示です。 :after要素にdisplay: blockを追加するだけです。簡単に擬似要素を操作するには、メイン要素position: relative、position: absoluteとして、その後:afterを作成し、それがこのような.boxdiv、何かをもとに置く：あなたは本当に別のdivを必要とする場合は

.box { 
    width: 100px; 
    height: 20px; 
    border: 1px solid black; 
    position: relative; /* Made it relative */ 
} 
.box:after { 
    content: ''; 
    position: absolute; 
    display: block; 
    width: 20px; 
    height: 20px; 
    border: 1px solid blue; 
    top: -1px; /* To compensate the border on the main element */ 
    background-color: blue; 
    left: 100%; /* To place it after the main element */ 
} 

、いくつかのJavaScriptを追加してみてくださいこの

$(document).ready(function() { 
    $('.box').append('<div class="another-box"></div>'); 
}); 

Answer 3

.box { 
 
    width: 100px; 
 
    height: 20px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    width: 20px; 
 
    bottom: -1px; 
 
    right: -21px; 
 
    top: -1px; 
 
    position: absolute; 
 
    background-color: blue; 
 
}

<div class="box"></div>

のような3210