¿Qué tal esto?
- Primero añadimos una coma después del último enlace con nombre
- Luego ocultamos los
... - Luego insertamos el texto
and more— y lo ajustamos un poco porque el espacio para los...sigue ahí técnicamente - (También añadimos selectores más específicos para evitar posibles conflictos en otros lugares)
.user-main .about .secondary dd.groups span:last-of-type::after {
content: ",";
}
.user-main .about .secondary dd.groups:last-child > a {
visibility: hidden;
}
.user-main .about .secondary dd.groups:last-child > a::after {
visibility: visible;
margin-left: -.8rem;
content: "and more";
}
Probablemente haya una forma más elegante de eliminar los ... del flujo por completo, pero el margen negativo parece funcionar bien.