Können Sie dem: after-Pseudoelement Zeilenumbrüche hinzufügen?

Ich möchte a <br />an eine bestimmte Klasse anhängen . Bei Verwendung der Pseudoklasse: after wird einfach <br />als Text angezeigt .

Gibt es eine Möglichkeit, diese Arbeit zu machen?

Es ist intern für IE8, sodass Browserprobleme kein Problem darstellen. Wenn ich mache

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

Ich möchte, dass "brillant" in einer neuen Zeile erscheint.

Sie können keine HTML-Tags rendern, aber Sie können den Stil wie folgt festlegen:

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

Die Haupteinstellung hier ist display: block;Dies wird gerendert : nach Inhalt in a DIV. Und dieses Pseudoelement wird von allen neuesten Browsern unterstützt. Einschließlich IE. Wenn Sie dies sagen, sollten Sie sich Ihrer Benutzer und ihrer Browser bewusst sein.

Sie können die \AEscape-Sequenz verwenden, die als Zeilenumbruch gerendert wird:

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

Diese Methode wurde in der CCS 2.1-Spezifikation für die contentEigenschaft erwähnt:

Autoren können Zeilenumbrüche in den generierten Inhalt aufnehmen, indem sie die "\A"Escape-Sequenz in eine der Zeichenfolgen nach der 'content' Eigenschaft schreiben . Dieser eingefügte Zeilenumbruch unterliegt weiterhin der 'white-space'Eigenschaft.

Es wird schlimmer - das: After Class funktioniert nicht einmal in IE6 (und wahrscheinlich auch in einigen anderen Browsern).

Ich denke, was Sie hier wirklich wollen, ist ein Rand am unteren Rand des Elements, um Abstand zu schaffen.

Einfach

.myElement {
    margin-bottom: 1em;
}