Элементы списка 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

Да и можно использовать, убедитесь, чтобы установить позицию: абсолютная использовать ширину и высоту для вашего псевдо элемента.

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>