
En Unicode, el personaje 0x000A está especialmente diseñado para controlar saltos de línea. En CSS, podemos escribirlo como 000A o A. Podemos usarlo como el contenido del pseudo-elemento ::after, y añadirlo al elemento especificado, para lograr un salto de línea.
Background:Unicode, white-space.

<style>
main{
width: 100%;
padding: 52px 39px;
background: rgba(180,160,120,.1);
}
span.key {
padding-right: 6px;
}
span.bold {
line-height: 2em;
font-weight: bold;
}
span.br::before {
content: "A";
white-space: pre;
}
span.bold + span.bold::before {
content: ", ";
font-weight: 500;
margin-left: -.25em;
}
</style>
<main class="main">
<span class="key">👦🏿Name:</span>
<span class="bold">OmegaYalfa</span>
<span class="key br">👨🏼💻GitHub:</span>
<span class="bold">https://github.com/OMEGAYALFA</span>
<span class="key br">🌎TL:</span>
<span class="bold">https://tutorialesenlinea.descargarjuegos.org</span>
</main>
En el código anterior, hay un espacio delante de la coma agregada entre los múltiples elementos span.bold a través del pseudo-elemento. El margen negativo margin-left: -.25em;se utiliza para compensar los huecos que aparecen.
Ver resultado
Comentarios