Ich frage mich nur, ob es irgendwie möglich ist, die CSS- contentEigenschaft dazu zu bringen, HTML-Code anstelle eines Strings :beforeoder :aftereines Elements wie dem folgenden einzufügen :

.header:before{
  content: '<a href="#top">Back</a>';
}

das wäre ziemlich praktisch ... Es könnte über Javascript gemacht werden, aber die Verwendung von CSS würde das Leben wirklich einfacher machen :)

Das geht leider nicht. Gemäß der Spezifikation :

Der generierte Inhalt ändert den Dokumentbaum nicht. Insbesondere wird es nicht an den Dokumentensprachprozessor zurückgemeldet (z. B. zum erneuten Analysieren).

Mit anderen Worten bedeutet dies für Zeichenfolgenwerte, dass der Wert immer wörtlich behandelt wird. Es wird unabhängig von der verwendeten Dokumentsprache niemals als Markup interpretiert.

Verwenden Sie beispielsweise das angegebene CSS mit dem folgenden HTML-Code:

<h1 class="header">Title</h1>

... führt zu folgender Ausgabe:

<a href="#top"> Zurück </a> Titel

Wie in den Kommentaren zur Antwort von @ BoltClock fast erwähnt , können Sie in modernen Browsern Pseudoelementen mithilfe von ( url()) in Kombination mit dem <foreignObject>Element von svg tatsächlich ein HTML-Markup hinzufügen .

Sie können entweder eine URL angeben, die auf eine tatsächliche SVG-Datei verweist, oder sie mit einer dataURI-Version ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)) erstellen.

Beachten Sie jedoch, dass es sich meistens um einen Hack handelt und dass es viele Einschränkungen gibt:

• Sie können keine externen Ressourcen aus diesem Markup laden (kein CSS, keine Bilder, keine Medien usw.).
• Sie können kein Skript ausführen.
• Da dies nicht Teil des DOM ist, besteht die einzige Möglichkeit, es zu ändern, darin, das Markup als dataURI zu übergeben und dieses dataURI in zu bearbeiten document.styleSheets. für diesen Teil DOMParserund XMLSerializerkann helfen .
• Während der gleiche Vorgang das Laden von URL-codierten Medien in <img>Tags ermöglicht, funktioniert dies in Pseudoelementen nicht (zumindest ab heute weiß ich nicht, ob es irgendwo angegeben ist, wo es nicht angegeben werden sollte, also kann es sein eine noch nicht implementierte Funktion sein).

Nun eine kleine Demo eines HTML-Markups in einem Pseudoelement:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

In CSS3-Medien ist dies mit position: running()und möglich content: element().

Beispiel aus dem Entwurf des CSS-generierten Inhalts für ausgelagerte Medienmodule :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner kann ein beliebiges Element sein und headingist ein beliebiger Name für den Slot.

BEARBEITEN: Zur Verdeutlichung gibt es im Grunde keine Browserunterstützung, daher war dies hauptsächlich als zukünftige Referenz gedacht / zusätzlich zu den bereits gegebenen "praktischen Antworten".