html - 伪类::before - 创建 css 圆

Question

我正在尝试用 css 创建圆圈，但不想使用伪类::before

这应该是这样的(对于地铁站列表):

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

我知道可以在文本或图像之前使用附加元素来完成。但是想知道是否可以在::before

中使用这些属性

Answer 1

您还需要设置content、height 和display 以使其实际呈现伪元素。

例子:

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

<div class="subway-item"></div>

注意:最好在标准属性(border-radius)之前编写特定于供应商的属性。