Visualizaci贸n de valores separados por comas usando CSS

A menudo, tiene listas de representaci贸n (nombres u otras entidades) en una oraci贸n completa en ingl茅s.

Por ejemplo, Bangalore Chennai Delhi Mumbai

como Bangalore , Chennai , Delhi y Mumbai

El primer bit de CSS agrega la “coma” entre los elementos HTML con el atributo de clase “coma”, que es la parte f谩cil.

El segundo y tercer elemento ayudan a poner “y” en lugar de una coma entre el pen煤ltimo y el 煤ltimo elemento.

.comma:not(:last-of-type):after {
content
: ",";
}
.comma:nth-last-of-type(2):before {
content
: none;
}
.comma:nth-last-of-type(2):after {
content
: " and ";
}

El HTML que puede dise帽ar:

<div>
<a href='#'>Bangalore</a>
<aside class='comma'/>
<a href='#'>Chennai</a>
<aside class='comma'/>
<a href='#'>Delhi</a>
<aside class='comma'/>
<a href='#'>Mumbai</a>
<aside class='comma'/>
</div>
  • Tenga en cuenta el uso de la etiqueta HTML adicional “aparte”, esto es solo para mantener el estilo en el href, aislado del separador “,”.

  • La etiqueta podr铆a estar a un lado o cualquier otra etiqueta HTML de uso menos com煤n, solo para que el estilo CSS global en una etiqueta m谩s com煤n como <span> o <div> no tenga efectos secundarios en el estilo del separador.