/* 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;
}