使用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'; 
}