wake-up-neo.com

CSS-Inhaltseigenschaft: Ist es möglich, HTML anstelle von Text einzufügen?

Ich frage mich nur, ob es irgendwie möglich ist, die CSS content -Eigenschaft dazu zu bringen, HTML-Code anstelle eines Strings in :before Oder :after Ein Element wie das Folgende einzufügen:

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

das wäre ganz praktisch ... Es könnte durch Javascript gemacht werden, aber mit CSS würde das Leben wirklich einfacher werden :)

216
zanona

Das geht leider nicht. Nach dem spec :

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

Mit anderen Worten, für Zeichenfolgenwerte bedeutet dies, 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 folgendem HTML:

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

... führt zu folgender Ausgabe:

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

195
BoltClock

Wie in den Kommentaren zu der Antwort von @ BoltClock fast angemerkt, können Sie in modernen Browsern Pseudoelementen tatsächlich HTML-Markups hinzufügen, indem Sie die Funktion (url()) in Kombination mit svg's = verwenden <foreignObject> Element.

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

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, können Sie es nur ändern, indem Sie das Markup als dataURI übergeben und dieses dataURI in document.styleSheets Bearbeiten. für diesen Teil DOMParser und XMLSerializer kann helfen .
  • Dieselbe Operation ermöglicht es uns, url-codierte Medien in <img> - Tags zu laden, dies funktioniert jedoch nicht in Pseudoelementen (zumindest bis heute weiß ich nicht, ob es irgendwo angegeben ist, wo es sein sollte) 't, also ist es möglicherweise eine noch nicht implementierte Funktion).

Nun eine kleine Demo eines HTML-Markups in einem Pseudo-Element:

/* 
**  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>
42
Kaiido

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

Beispiel aus dem Entwurf CSS-generierter Inhalt für das Paged Media-Modul :

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

.runner { 
  position: running(heading);
}

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

EDIT: Um dies zu verdeutlichen, gibt es im Grunde keine Browserunterstützung, so dass dies hauptsächlich zum späteren Nachschlagen gedacht war/zusätzlich zu den bereits gegebenen "praktischen Antworten" .

5
sol