Nav List Items und :: Before :: After

Question

Ist es möglich, :: before und :: after Elemente hinzuzufügen, um Elemente aufzulisten?

Zum Beispiel, wenn ich folgendes haben:

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

Kann ich das letzte Element Ziel, sagen wir mal, und fügen Sie ein :: after Element wie so, oder kann ich gezielt nur die tatsächliche UL-Element?

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

Answer 1

Ja u verwenden können, stellen Sie sicher, Position einzustellen: absolute verwenden Höhe und Breite für Ihre Pseudo-Element.

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

Hier ist die Arbeits CSS - Sie nth-child oder last-child dafür verwenden können, und :after funktioniert.

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

Ja können Sie. Hier ist die Demo:

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>