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

Answer 2

I just want to add an alternative way that I am using - it's a different take on Josh's answer that uses an actual dot character, which allows you to use text-shadow and other text styles if you wish. I think it's also easier to vertically center (in my opinion). I've added on a text-shadow to add a nice glow effect as I'm using it to indicate status.

jsFiddle example

h2:after, h2:before {
    content: "•";
    color: #b83b3b;
    text-shadow: #b83b3b 0 0 5px;
    margin:0 10px;
}