CSS 彩色点：之前和：h2 之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20579311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Colored Dots :before and :after h2
提问by Jaeeun Lee
I'm trying to put colored dots before and after h2.
我试图在 h2 之前和之后放置彩色点。
This is my CSS;
这是我的 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
在恩
回答by Josh Crozier
Specify a value for the contentproperty, and then add display:inline-block
为content属性指定一个值，然后添加display:inline-block
h2:after, h2:before {
content:"\A";
width:10px;
height:10px;
border-radius:50%;
background: #b83b3b;
display:inline-block;
}
回答by Stephen Smith
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.
我只想添加一种我正在使用的替代方式 - 这是对 Josh 使用实际点字符的回答的不同看法，如果您愿意，它允许您使用文本阴影和其他文本样式。我认为垂直居中也更容易（在我看来）。我添加了一个文本阴影来添加一个很好的发光效果，因为我用它来指示状态。
h2:after, h2:before {
content: "?";
color: #b83b3b;
text-shadow: #b83b3b 0 0 5px;
margin:0 10px;
}
