Create contents of div using :before and :after

css, html

Solution

Nope, Sorry you can't

Useful to read : http://css-tricks.com/use-cases-for-multiple-pseudo-elements/

Just add some element inside your element

HTML :

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

CSS :

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

Problem

I have a single `div` element which I want to insert content into depending on it's class. I am able to insert 2 elements into this `div` using the `:before` and `:after` attributes in the CSS, but I need to be able to insert at least 5 elements. Here's what I have for 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; } ``` Is there any way I can create extra `:before` and `:after`? Something like `div:after:after`.

Original source