propiedades - Propiedad de contenido CSS: ¿es posible insertar HTML en lugar de texto?

propiedades de texto css

Question

Solo me pregunto si es posible de alguna manera hacer que la propiedad de content CSS inserte el código html en lugar de la cadena :before o :after un elemento como:

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

Esto sería bastante útil ... Se podría hacer a través de Javascript, pero usar css para esto realmente haría las vidas más fáciles :)

Answer 1

Como casi se nota en los comentarios a la respuesta de @BoltClock, en los navegadores modernos , en realidad puede agregar un marcado html a los pseudo-elementos usando ( url() ) en combinación con el elemento <foreignObject> svg.

Puede especificar una URL que apunte a un archivo svg real o crearla con una versión dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup) )

Pero tenga en cuenta que es principalmente un hack y que hay muchas limitaciones:

• No puede cargar ningún recurso externo desde este marcado (sin CSS, sin imágenes, sin medios, etc.).
• No se puede ejecutar el script.
• Dado que esto no será parte del DOM, la única forma de modificarlo es pasar el marcado como dataURI y editar este dataURI en document.styleSheets . Para esta parte, DOMParser y XMLSerializer pueden help .
• Si bien la misma operación nos permite cargar medios codificados con url en etiquetas <img> , esto no funcionará en pseudo-elementos (al menos a partir de hoy, no sé si está especificado en algún lugar que no debería, por lo que puede ser una característica aún no implementada).

Ahora, una pequeña demostración de algunas marcas HTML en un pseudo elemento:

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

Answer 2

Desafortunadamente, esto no es posible. Por la spec :

El contenido generado no altera el árbol de documentos. En particular, no se envía al procesador del lenguaje del documento (por ejemplo, para volver a analizar).

En otras palabras, para los valores de cadena, esto significa que el valor siempre se trata literalmente. Nunca se interpreta como marcado, independientemente del idioma del documento en uso.

Como ejemplo, usando el CSS dado con el siguiente HTML:

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

... resultará en el siguiente resultado:

<a href="#top"> Atrás </a> Título

Answer 3

En medios paginados CSS3 esto es posible usando position: running() y content: element() .

Ejemplo del borrador de CSS Generated Content for Paged Media Module :

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

.runner { 
  position: running(heading);
}

.runner puede ser cualquier elemento y el heading es un nombre arbitrario para la ranura.

EDITAR: para aclarar, básicamente no hay soporte para el navegador, por lo que fue principalmente para futuras referencias / además de las "respuestas prácticas" ya proporcionadas.