Colored Dots :before and :after h2

I’m trying to put colored dots before and after h2.

This is my CSS;

h2:after {
  width:10px;
  height:10px;
  border-radius:50%;
  background: #b83b3b;
}


h2:after {
  width:10px;
  height:10px;
  border-radius:50%;
  background: #b83b3b;
}

But no dots show up. Any leads? Thanks!


solution

Specify a value for the content property, and then add display:inline-block

jsFiddle example

h2:after, h2:before {
  content:"\A";
  width:10px;
  height:10px;
  border-radius:50%;
  background: #b83b3b;
  display:inline-block;
}