Big/bold circular dot in CSS content - html

Question

I having a small problem in getting the right character for my CSS content element. What I wanted is dots under my heading, 3 dots to be specific and so I have the following CSS:
.dotted-effect::before{
position: absolute;
top: 80%;
left: 50%;
content: '.';
font-size: 1.2em;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
color: #444;
text-shadow: 20px 0 #444, -20px 0 #444;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
The problem is in the way the CSS dot is displayed. Have a look at how it looks:
Notice how the dots look a bit squarish and tiny.
Now I'd like my dots to be circular and a bit bold: not ugly bold, but slightly bold.
I tried looking up Stack Overflow and a lot of people had the same problem:
This thread addresses my problem in a few ways. The problem is I am a bit specific about how I want my dots to be, and so I cannot settle for those tiny small dots. I also went through a lot of HTML ASCHII charts and none of them had what I was looking for.
What can I do next to achieve my goal?

Answer 1

How about background + border-radius?
http://jsfiddle.net/z7v6xk44/1/
<div class="dots"></div>
.dots, .dots:before, .dots:after {
width: 4px;
height: 4px;
background: black;
border-radius: 50%;
}
.dots{
margin: 0 auto;
position: relative;
display: inline-block;
}
.dots:before {
content: '';
position: absolute;
left: -10px;
}
.dots:after {
content: '';
position: absolute;
right: -10px;
}