html - nth - Pseudo clase:: antes-crea css circle

nth-child css

Question

Estoy tratando de crear el círculo con css, pero no voy a usar pseudo class :: before

Esto debería ser así (para la lista de estaciones de metro):

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

Sé que se puede hacer con un elemento adicional antes del texto o con una imagen. Pero quiero saber si es posible usar tales propiedades en :: antes

Answer 1

También es necesario configurar el content , la height y la display para que realmente represente el pseudo elemento.

Ejemplo:

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

Nota: es mejor escribir las propiedades específicas del proveedor antes que la propiedad estándar ( border-radius en su caso).