Propriété de contenu CSS: est-il possible d’insérer du HTML au lieu de Text?

Je me demande s’il est possible de faire en sorte que la propriété de content CSS insère du code html à la place de ssortingng sur :before ou :after un élément comme:

 .header:before{ content: 'Back'; } 

ce serait très pratique … Cela pourrait être fait par Javascript mais utiliser css pour cela rendrait vraiment la vie plus facile 🙂

Malheureusement, ce n’est pas possible. Par la spécification :

Le contenu généré ne modifie pas l’arbre du document. En particulier, il n’est pas renvoyé au processeur de langue de document (par exemple, pour la reparation).

En d’autres termes, pour les valeurs de chaîne, cela signifie que la valeur est toujours traitée littéralement. Il n’est jamais interprété comme un balisage, quelle que soit la langue du document utilisée.

Par exemple, en utilisant le CSS donné avec le code HTML suivant:

 

Title

… entraînera la sortie suivante:

Retour Titre

Comme presque noté dans les commentaires de la réponse de @ BoltClock, dans les navigateurs modernes , vous pouvez réellement append du balisage HTML aux pseudo-éléments en utilisant le ( url() ) en combinaison avec l’élément de svg.

Vous pouvez soit spécifier une URL pointant vers un fichier svg réel, soit la créer avec une version dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup) )

Mais notez que c’est surtout un hack et qu’il y a beaucoup de limitations:

  • Vous ne pouvez pas charger de ressources externes à partir de ce balisage (pas de CSS, pas d’images, pas de média, etc.).
  • Vous ne pouvez pas exécuter de script.
  • Comme ceci ne fera pas partie du DOM, la seule façon de le modifier est de passer le balisage en tant que dataURI et d’éditer cette dataURI dans document.styleSheets . pour cette partie, DOMParser et XMLSerializer peuvent aider .
  • Bien que la même opération nous permette de charger du contenu multimédia encodé en URL dans des balises , cela ne fonctionnera pas dans les pseudo-éléments (du moins à ce jour, je ne sais pas si cela est spécifié quelque part) il peut donc s’agir d’une fonctionnalité non encore implémentée).

Maintenant, une petite démo de balisage html dans un pseudo élément:

 /* ** original svg code : * * * *  * 
* I am
HTML

*

* * * */

 #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'); } 
 

hi

Dans les médias paginés en CSS3, cela est possible en utilisant position: running() et content: element() .

Exemple tiré du brouillon de contenu généré par CSS pour le module de support paginé :

 @top-center { content: element(heading); } .runner { position: running(heading); } 

.runner peut être n’importe quel élément et header est un nom arbitraire pour le slot.

EDIT: pour clarifier, il n’y a pratiquement pas de support du navigateur, donc cela était principalement destiné à servir de référence / en plus des «réponses pratiques» déjà données.