Colored Dots :before and :after h2

user_2741060 0
Viewed 39433

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

pseudo-element css
2 Answers

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