Navリスト項目と::前:: ::後

Question

リスト項目に:: beforeと:: after要素を追加できますか？例えば

私は、次のしている場合：

<ul> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 

が、私は最後の項目を対象とすることができ、さんが言うとそうのような要素の後に::を追加してみましょうか、私は実際にターゲットにすることができますUL要素ですか？ここで

ul li:nth-child(3)::after 
{ 
content: ""; 
height: 10px; 
width: 10px; 
background: transparent; 
border: 1px solid #ccc; 
} 

Answer 1

はいuは使用することができ、位置を設定してください。

ul li:nth-child(3)::after { 
 
    display block; 
 
    position: absolute; 
 
    content: ""; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: transparent; 
 
    border: 1px solid #ccc; 
 
}

<ul> 
 
<li>One</li> 
 
<li>Two</li> 
 
<li>Three3</li> 
 
</ul>

Answer 2

は作業CSSです - あなたはこのためにnth-childまたはlast-childを使用することができ、かつ:afterは、作業を行います。

http://jsbin.com/xatuve/edit?html,css,output

ul li:last-child:after { 
    content: ""; 
    height: 10px; 
    width: 10px; 
    background: transparent; 
    border: 1px solid #ccc; 
} 

Answer 3

はい、使用することができます。ここではデモがある：あなたの擬似要素のための高さと幅を使用して、絶対：

ul li:nth-child(3)::after 
 
{ 
 
    content: "Test"; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: transparent; 
 
    border: 1px solid #ccc; 
 
}

<ul> 
 
<li>One</li> 
 
<li>Two</li> 
 
<li>Three</li> 
 
<li>Four</li> 
 
</ul>