Pouvez-vous ajouter des sauts de ligne au pseudo-élément: after?

Question

Je veux ajouter un <br /> à une classe particulière. L'utilisation de la: pseudo-classe affiche simplement <br /> comme texte.

Existe-t-il un moyen de faire fonctionner cela?

C'est interne pour IE8, donc les problèmes de navigateur ne sont pas un problème. Si je fais

<span class="linebreakclass">cats are</span> brilliant

Je veux que "génial" apparaisse sur une nouvelle ligne.

Answer 1

Vous ne pourrez pas rendre les balises HTML mais vous pouvez définir un style comme ceci:

.needs-space:after
{
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

Le paramètre principal ici est display: block; Cela rendra : après contenu dans un DIV. Et ce pseudo-élément est pris en charge par tous les derniers navigateurs. Y compris IE. En disant cela, vous devez connaître vos utilisateurs et leurs navigateurs.

Answer 2

Vous pouvez utiliser \A séquence d'échappement, qui s'affichera comme une nouvelle ligne:

.new-line:after {
  white-space: pre-wrap;
  content: "\A";
}

Cette méthode a été mentionnée dans la spécification CCS 2.1 pour la propriété content:

Les auteurs peuvent inclure des retours à la ligne dans le contenu généré en écrivant le "\A" séquence d'échappement dans l'une des chaînes après le 'content' propriété. Ce saut de ligne inséré est toujours soumis aux 'white-space' propriété.

Answer 3

Cela empire - la classe: after ne fonctionne même pas dans IE6 (et probablement aussi dans d'autres navigateurs).

Je pense que ce que vous voulez vraiment ici, c'est une marge au bas de l'élément, pour fournir un espacement.

Simplement

.myElement {
    margin-bottom: 1em;
}