伪 class ::before - 创建 css 圈

Question

我正在尝试使用 css 创建圆圈，但不想使用伪 class ::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在你的情况下）。

伪 class ::before - 创建 css 圈

Pseudo class ::before - create css circle

html

css

pseudo-class