Hacer que una lista de elementos se coloque como una frase separada por comas

Cuando tenemos una lista de cosas en HTML se hace con el famoso ul > li.

En algunos casos puede que queramos que en lugar de aparecer por bloques se componga en una frase donde cada elemento se separa del otro por una coma. Obviamente haciendo que al final no haya coma.

Para ello el código que necesitamos es:

.post-categories {
  display: inline;
  list-style: none;
}
.post-categories li {
  display: inline;
}
.post-categories li:after {
  content: ", ";
}
.post-categories li:last-child:after {
    content: "";
}

Sacado (como no) de stackoverflow

Suscribirte
Notificación de
guest

0 Comments
Inline Feedbacks
View all comments

+ SIGUE NAVEGANDO

Happy Hues | Curaduría de colores en contexto

Una página muy útil para elegir una selección de colores que permita tener una web con orden y estilo. Sin duda la curaduría de saberes fue, es y será algo tremendamente valioso https://www.happyhues.co/…

Incluir pie de foto en imagen destacada

Una de las bases más importantes para sostener y validar la Cultura Libre es el hecho de respetar la mención de autoría, y mejor aún si la hacemos visible como se debe. Páginas como Unsplash están cambiando los formatos tradicionales (y en muchos casos horribles) de gestión privativa de imágenes, o de colocado de marca de agua. Si bien no es un sistema perfecto, es estupendo para poder contar con…

Software Libre: Herramienta alternativa para la creación visual digital

Tesis que para obtener el grado de Maestra en Artes Visuales presenta: Martha Irene Soria Guzmán. "El diseño gráfico parece haberse estacionado en una complaciente edad media, el contenido parece ser esclavo del corporativismo, del branding, del marketing, de los grupos de enfoque y de la cultura del maquillaje de reparaciones rápidas. Incluso en sus formas más radicales, el diseño se ha conve…