彩色圆点：之前和之后：h2之后

Question

我试图在h2之前和之后放置彩色圆点。

这是我的CSS;

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

但没有点出现。

任何线索？

谢谢！

Jaeeun

Answer 1

指定content属性的值，然后添加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

我只想添加我正在使用的另一种方法-这与乔什的答案不同，后者使用实际的点字符，允许您根据需要使用文本阴影和其他文本样式。我认为垂直居中也更容易（我认为）。我已经在文字阴影上添加了一个不错的发光效果，因为我正在使用它来指示状态。

jsFiddle example

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