css - solo - Agregue un espacio("") después de un elemento usando: después

tooltip html bootstrap

Question

Quiero agregar un espacio en blanco después de algún contenido, sin embargo el content: " "; no parece funcionar

Este es mi código:

h2:after {
    content: " ";
}

... lo que no funciona, sin embargo esto sí:

h2:after {
    content: "-";
}

¿Qué estoy haciendo mal?

Answer 1

Explicación

Vale la pena señalar que su código inserta un espacio

h2::after {
  content: " ";
}

Sin embargo, se elimina de inmediato.

De cajas anónimas en línea ,

El contenido de espacios en blanco que posteriormente se colapsaría de acuerdo con la propiedad ''espacio en blanco'' no genera ningún cuadro en línea anónimo.

Y a partir del modelo de procesamiento ''espacio en blanco'' ,

Si un espacio (U + 0020) al final de una línea tiene ''espacio en blanco'' configurado como ''normal'', ''ahora'' o ''pre-línea'', también se eliminará.

Solución

Por lo tanto, si no desea que se elimine el espacio, configure white-space en white-space como pre o 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 rompan (U + 00a0). Se supone que evitan saltos de línea entre las palabras. Se supone que no deben usarse como espacio no plegable, eso no sería semántico.

Answer 2

Necesitaba esto en lugar de usar relleno porque usé contenedores de bloque 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 después de él.

Terminé con algo como:

.transaction-tile:after {
  content: "/f105";
}

.transaction-tile:last-child:after {
  content: "/00a0";
}

Usado fontawesome para el carácter gt (chevron). Por la razón que sea "contenido: ninguno"; Estaba produciendo problemas de alineación en la última baldosa.

Answer 3

Resulta que debe especificarse mediante unicode escapado. Esta pregunta está relacionada y contiene la respuesta.

La solución:

h2:after {
    content: "/00a0";
}