Otro semáforo CSS

dabblet.css

/* Otro semáforo CSS */

.semaforo,
.semaforo:before,
.semaforo:after {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
margin: 0 auto;
}
.semaforo:before {
position: absolute;
left: -100px;
content: "";
}
.semaforo:after {
position: absolute;
right: -100px;
content: "";
}
.verde {
background: limegreen;
}
.naranja {
background: orange;
}
.rojo {
background: red;
}
.azul {
background: blue;
}
.amarillo {
background: yellow;
}

.verdei:before {
background: limegreen;
}
.naranjai:before {
background: orange;
}
.rojoi:before {
background: red;
}
.azuli:before {
background: blue;
}
.amarilloi:before {
background: yellow;
}

.verded:after {
background: limegreen;
}
.naranjad:after {
background: orange;
}
.rojod:after {
background: red;
}
.azuld:after {
background: blue;
}
.amarillod:after {
background: yellow;
}

dabblet.html

<!-- HTML -->
<!-- Cambia los colores añadiendo i o d según la posición dónde quieres que aparezcan -->

<div class="semaforo verdei rojo  ">
</div>
<br/>
<div class="semaforo naranjai verde azuld ">
</div>

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}