Html 伪类::before - 创建css圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28773501/
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
Pseudo class ::before - create css circle
提问by alvery
I'm trying to create the circle with css, but wan't to use pseudo class ::before
我正在尝试用 css 创建圆圈，但不想使用伪类 ::before
This should be like that (for list of subway stations):
这应该是这样的（地铁站列表）：
.subway-item{
// css for text item going after circle
}
.subway-item::before{
width:15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color:#69b6d5;
}
I know that it can be done with additional element before text or with image. But want to know is it possible to use such properties in ::before
我知道它可以在文本或图像之前使用附加元素来完成。但是想知道是否可以在 ::before 中使用这些属性
回答by aaronk6
You also need to set content, heightand displayto make it actually render the pseudo element.
您还需要设置content，height并display使其实际呈现伪元素。
Example:
例子：
.subway-item::before{
content: '';
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #69b6d5;
}
Note:It's better to write the vendor-specific properties beforethe standard property (border-radiusin your case).
注意：最好在标准属性之前编写特定于供应商的属性（border-radius在您的情况下）。
