Pseudo class ::before - create css circle

Question

我试图用css创建圆，但不想在之前使用伪类：

这应该是这样的（对于地铁站列表）：

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

我知道它可以在文本之前添加额外的元素，也可以在图像之前添加。但是想知道是否可以在之前的：中使用这样的属性

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）之前写入供应商特定的属性。