Create contents of div using :before and :after

Question

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.

Answer 1

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