Создайте содержимое div, использующего до и после CSS

Question

У меня есть один элемент div, который я хочу вставить содержимое в зависимости от его класса.

Я могу вставить 2 элемента в этот div, используя атрибуты before и after в CSS, но мне нужно уметь вставлять не менее 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; 
} 

Есть ли способ я могу создать дополнительные до и десерт - что-то вроде 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'; 
}