Pouvez-vous ajouter des sauts de ligne au: après élément pseudo?

Question

Je veux ajouter un <br /> à une classe particulière. Utilisation de la:. Après la pseudo-classe affiche simplement <br /> sous forme de texte

Y at-il un moyen de faire ce travail?

Il est interne pour IE8 si les problèmes de navigateur ne sont pas un problème. Si je fais

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

Je veux apparaître sur une nouvelle ligne « brillante ».

Answer 1

Vous ne pouvez pas rendre les balises HTML, mais vous pouvez définir le 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 rend : après contenu dans un DIV. Et cet élément pseudo est pris en charge par tous les navigateurs les plus récents. Y compris IE. Dire cela, vous devez être au courant de vos utilisateurs et leurs navigateurs.

Answer 2

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

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

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

  

Les auteurs peuvent inclure dans les nouvelles lignes du contenu généré par écrit la   "\A" séquence d'échappement dans l'une des chaînes après la 'content'   propriété. Cette rupture de ligne insérée est encore soumise à la    'white-space' propriété.

Answer 3

Il y a pire - le:. Après la classe ne fonctionne même pas dans IE6 (et probablement d'autres navigateurs aussi)

Je pense que ce que vous voulez vraiment ici est une marge sur le fond de l'élément, pour fournir un espacement.

Il suffit

.myElement {
    margin-bottom: 1em;
}