Agregue un espacio (" ") después de un elemento usando :after
Quiero agregar un espacio en blanco después de algún contenido, sin embargo, content: " ";parece que no funciona.
Este es mi código:
h2:after {
content: " ";
}
... lo cual no funciona, sin embargo esto sí:
h2:after {
content: "-";
}
¿Qué estoy haciendo mal?
Resulta que debe especificarse mediante Unicode escapado. Esta pregunta está relacionada y contiene la respuesta.
La solución:
h2:after {
content: "\00a0";
}
Explicación
Vale la pena señalar que su código inserta un espacio
h2::after {
content: " ";
}
Sin embargo, se elimina inmediatamente.
Desde cuadros en línea anónimos ,
El contenido de espacios en blanco que posteriormente se contraería según la propiedad 'espacio en blanco' no genera ningún cuadro en línea anónimo.
Y del modelo de procesamiento de 'espacios en blanco' ,
Si un espacio (U+0020) al final de una línea tiene 'espacio en blanco' configurado como 'normal', 'nowrap' o 'pre-line', también se elimina.
Solución
Entonces, si no desea que se elimine el espacio, configúrelo white-spaceen preo pre-wrap.
h2 {
text-decoration: underline;
}
h2.space::after {
content: " ";
white-space: pre;
}<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>No utilice espacios que no se rompan (U+00a0). Se supone que deben evitar los saltos de línea entre palabras. No se supone que se utilicen como espacio no plegable, eso no sería semántico.
Necesitaba esto en lugar de usar relleno porque usaba contenedores de bloques en línea para mostrar una serie de eventos individuales en una línea de tiempo de flujo de trabajo. El último evento en la línea de tiempo no necesitaba ninguna flecha detrás.
Terminé con algo como:
.transaction-tile:after {
content: "\f105";
}
.transaction-tile:last-child:after {
content: "\00a0";
}
Se utilizó fontawesome para el carácter gt (chevron). Por alguna razón "contenido: ninguno"; estaba produciendo problemas de alineación en el último mosaico.
