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).