Ajoutez un espace ("") après un élément en utilisant: after

274

Je veux ajouter un espace vide après du contenu, mais content: " ";cela ne semble pas fonctionner.

Voici mon code:

h2:after {
    content: " ";
}

... ce qui ne fonctionne pas, mais cela:

h2:after {
    content: "-";
}

Qu'est-ce que je fais mal?

css

— bradley.ayers
source

Je ne comprends pas le résultat attendu. Essayez-vous d'ajouter en paddingutilisant content. Il semble qu'il serait impossible de dire si l'espace a été ajouté.

— fncomp

C'est une question étrange, vous devez utiliser un rembourrage pour ajouter de l'espace, pas de contenu: après , vous ne savez peut-être pas la différence entre display: inline et display: block?

— Littlemad

J'essaie d'ajouter du rembourrage via le contenu.

— bradley.ayers

J'ai trouvé que l'ajout d'un espace à l'aide de cette méthode était également utile lorsqu'un overflow: hiddenélément de bloc coupait les derniers pixels du dernier caractère du texte en italique. Le rembourrage n'aiderait pas dans ce cas.

— Joe Waller

Le rembourrage n'aide pas si vous souhaitez que votre espace soit souligné à l'aide de l'un text-decoration: underline;ou l'autre.

— dmitry_romanov

Réponses:

142

Explication

Il est à noter que votre code insère un espace

h2::after {
  content: " ";
}

Cependant, il est immédiatement supprimé.

Depuis les boîtes en ligne anonymes ,

Le contenu d'espace blanc qui serait ensuite réduit en fonction de la propriété «espace blanc» ne génère aucune boîte en ligne anonyme.

Et à partir du modèle de traitement des «espaces blancs» ,

Si un espace (U + 0020) à la fin d'une ligne a un «espace blanc» réglé sur «normal», «nowrap» ou «pré-ligne», il est également supprimé.

Solution

Donc, si vous ne souhaitez pas que l'espace soit supprimé, définissez white-spacesur preou 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>

Développer l'extrait

N'utilisez pas d'espaces insécables (U + 00a0). Ils sont censés empêcher les sauts de ligne entre les mots. Ils ne sont pas censés être utilisés comme espace non pliable, ce ne serait pas sémantique.

— Oriol
source

Il semble que ce white-spacene soit pas pris en charge par iE11 ni Edge (voir caniuse.com/#search=white-space ). la réponse de l'utilisateur bradley.ayers est-elle donc meilleure? (Je ne sais pas, il y a d'autres aspects comme la sémantique ou le comportement de rupture de ligne)

— chimos

561

Il s'avère qu'il doit être spécifié via unicode échappé. Cette question est liée et contient la réponse.

La solution:

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

— bradley.ayers
source

Cela ne vaut rien que cela ajoutera un espace NON-RUPTURE. Si vous voulez un espace normal, vous avez besoin de "\ 0020" au lieu de "\ 00A0".

— Offlein

Il convient également de noter que l'ajout d'un espace normal ne fera rien. Si vous n'avez aucun espace entre le texte de cet élément et l'élément précédent, cela n'en ajoutera pas un. Un espace normal va simplement s'effondrer en lui-même.

— mheim

@Offlein veuillez ajouter `\ 0020` comme réponse séparée car certaines polices, par exemple Font Awesome, ne permettront pas \00A0d'afficher un espace, et si vous voulez un espace entre les éléments plutôt qu'avant ou après, vous ne pouvez pas utiliser de remplissage

— Mousey

Comment ajoutez-vous de l'espace après quelque chose qui est déjà dans le contenu?

— vsync

@ FrançoisDupont, avez-vous une ressource décrivant ce changement?

— isherwood

J'en avais besoin au lieu d'utiliser le remplissage parce que j'utilisais des conteneurs de blocs en ligne pour afficher une série d'événements individuels dans une chronologie de workflow. Le dernier événement de la chronologie n'avait besoin d'aucune flèche après.

A fini avec quelque chose comme:

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

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

Fontawesome utilisé pour le caractère gt (chevron). Pour une raison quelconque, "contenu: aucun;" produisait des problèmes d'alignement sur la dernière tuile.

— don.aymar
source