彩色圆点:之前和之后: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例子

h2:after, h2:before {
    content:"\A";
    width:10px;
    height:10px;
    border-radius:50%;
    background: #b83b3b;
    display:inline-block;
}

Answer 2

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

\n\n

jsFiddle 示例

\n\n

h2:after, h2:before {\n    content: "\xe2\x80\xa2";\n    color: #b83b3b;\n    text-shadow: #b83b3b 0 0 5px;\n    margin:0 10px;\n}\n

\n