CSS内容中的大/粗圆点

Question

嘿伙计们，我在为CSS内容元素获取正确的字符方面遇到了一个小问题。我想要的是我的标题下的点，3个点是具体的，所以我有以下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;
}

问题在于CSS点的显示方式。看看它的外观。

注意点看起来有点方形和微小。

现在我希望我的圆点是圆形的，有点大胆..略微，不是丑陋的粗体，但略显大胆。

我试着查找SO，很多人都有同样的问题：

this thread在几个方面解决了我的问题。问题是我有点特别想要我的点是如何，所以我不能满足于那些微小的小点。 我也经历了很多HTML ASCHII图表，没有一个人有我想要的帽子。

如果有人能引导我找到解决方案，我真的很感激。因为这看起来更复杂，实际上是。

谢谢。

亚历山大。

Answer 1

背景+边界半径怎么样？

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