Agregue un espacio ("") después de un elemento usando: after

274

Quiero agregar un espacio en blanco después de cierto contenido, sin embargo content: " ";, parece que no funciona.

Este es mi código:

h2:after {
    content: " ";
}

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

h2:after {
    content: "-";
}

¿Qué estoy haciendo mal?

css bradley.ayers
fuente
2
No entiendo el resultado esperado. ¿Estás tratando de agregar paddingusando content? Parece que sería imposible saber si se agregó el espacio.
fncomp
2
Es una pregunta extraña, debe usar relleno para agregar espacio, sin contenido: después , tal vez no sepa sobre la diferencia entre display: inline y display: block?
Littlemad
Estoy tratando de agregar relleno a través del contenido.
bradley.ayers
2
Descubrí que agregar un espacio usando este método también era útil cuando overflow: hiddenun elemento de bloque cortaba los últimos píxeles del último carácter del texto en cursiva. El relleno no ayudaría en este caso.
Joe Waller
3
El relleno no ayuda si quieres que tu espacio esté subrayado usando text-decoration: underline;cualquiera de los dos.
dmitry_romanov

Respuestas:

142

Explicación

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

h2::after {
  content: " ";
}

Sin embargo, se elimina de inmediato.

Desde cuadros en línea anónimos ,

El contenido de espacios en blanco que posteriormente se colapsaría de acuerdo con la propiedad 'espacio en blanco' no genera cuadros en línea anónimos.

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

Si un espacio (U + 0020) al final de una línea tiene 'espacio en blanco' establecido en 'normal', 'ahora' o 'prelínea', 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>
Expandir fragmento

No utilice espacios que no se rompan (U + 00a0). Se supone que evitan los saltos de línea entre palabras. Se supone que no deben usarse como espacio no plegable, eso no sería semántico.

Oriol
fuente
3
Parece que white-spaceno es compatible con iE11 ni Edge (consulte caniuse.com/#search=white-space ). ¿Por lo tanto, la respuesta del usuario bradley.ayers es mejor? (No sé, hay otros aspectos como la semántica o el comportamiento de salto de línea)
Chimos
561

Resulta que debe especificarse a través de unicode escapado. Esta pregunta está relacionada y contiene la respuesta.

La solución:

h2:after {
    content: "\00a0";
}
bradley.ayers
fuente
64
No vale la pena que esto agregará un espacio que NO SE ROMPE. Si desea un espacio normal, necesita "\ 0020" en lugar de "\ 00A0".
Offlein
44
También vale la pena señalar que agregar un espacio normal no hará nada. Si no tiene espacios en blanco entre el texto en este y el elemento anterior, esto no agregará uno. Un espacio normal simplemente colapsará en sí mismo.
mheim
2
@Offlein agregue `\ 0020` como respuesta separada porque algunas fuentes, por ejemplo, Font Awesome no permitirán \00A0mostrar un espacio, y si desea un espacio entre elementos en lugar de antes o después no puede usar relleno
Mousey
¿Cómo agrega espacio después de algo que ya está en el contenido?
vsync
2
@ FrançoisDupont, ¿tiene un recurso que describa este cambio?
isherwood
9

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 flecha después.

Terminé con algo como:

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

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

Se utilizó fontawesome para el personaje gt (chevron). Por alguna razón "content: none;" estaba produciendo problemas de alineación en el último mosaico.

don.aymar
fuente