使用CSS之前和之後創建div的內容

Question

我有一個div元素，我想插入內容到取決於它的類。

我可以使用CSS中的before和after屬性在此div中插入2個元素，但我需要能夠插入至少5個元素。

這裏就是我有2 ...

div { 
    background: blue; 
    margin: 0 auto; 
    width: 50px; 
    height: 50px; 
    padding: 0; 
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
} 

div:after { 
    content:''; 
    display:block; 
    border:1px solid #000; 
    width:40px; 
    height:40px; 
    margin:5px auto; 
    background-color:#DDD; 
} 
div:before { 
    content:''; 
    display:block; 
    border:1px solid #000; 
    width:40px; 
    height:40px; 
    margin:5px auto; 
    background-color:#DDD; 
} 

有什麼辦法，我可以創造額外的前afters - 像div:after:after？

Answer 1

作爲Paulie_D評論你不能得到：後：後在CSS。

雖然你可以做它的jQuery由Chaining

$("div").prepend(" *before* ").prepend(" *before before* ").append(" *after* ").append(" *after after* "); 

見JSFiddle here

雖然使用jQuery的它更有點有效一個解決方案，因爲你真的應該只使用：前以及：在造型的CSS選擇器之後。

Answer 2

不，對不起，你不能

有用的信息：http://css-tricks.com/use-cases-for-multiple-pseudo-elements/

只需添加你的元素裏面的一些元素

HTML：

<div> 
    <div> 
    </div>  
</div> 

CSS：

div:after { 
    content:'1'; 
} 
div > div:after { 
    content:'2'; 
}