Colored Dots :before and :after h2

Question

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!

Jaeeun

Answer 1

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