Propiedad de contenido CSS: ¿es posible insertar HTML en lugar de texto?
Me pregunto si es posible de alguna manera hacer que la contentpropiedad CSS inserte código html en lugar de una cadena :beforeo :afterun elemento como:
.header:before{
content: '<a href="#top">Back</a>';
}
Esto sería muy útil... Se podría hacer a través de Javascript, pero usar CSS para esto realmente haría la vida más fácil :)
Desafortunadamente, esto no es posible. Según la especificación :
El contenido generado no altera el árbol del documento. En particular, no se devuelve al procesador de lenguaje de documentos (por ejemplo, para su análisis).
En otras palabras, para valores de cadena esto significa que el valor siempre se trata literalmente. Nunca se interpreta como marcado, independientemente del idioma del documento que se utilice.
Como ejemplo, usando el CSS proporcionado con el siguiente HTML:
<h1 class="header">Title</h1>
... dará como resultado el siguiente resultado:
<a href="#top">Volver</a>Título
Como casi se señaló en los comentarios a la respuesta de @BoltClock, en los navegadores modernos , puede agregar algo de marcado html a los pseudoelementos usando ( url()) en combinación con el elemento de svg <foreignObject>.
Puede especificar una URL que apunte a un archivo svg real o crearlo con una versión de dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)).
Pero tenga en cuenta que es principalmente un truco y que existen 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 un URI de datos y editar este URI de datos en formato
document.styleSheets. por esta parte,DOMParseryXMLSerializerpuede ayudar . - Si bien la misma operación nos permite cargar medios codificados con URL en
<img>etiquetas, esto no funcionará en pseudoelementos (al menos a partir de hoy, no sé si se especifica en algún lugar donde 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 pseudoelemento:
/*
** 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>
En medios paginados CSS3 esto es posible usando position: running()y content: element().
Ejemplo del borrador del módulo de contenido generado por CSS para medios paginados :
@top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner puede ser cualquier elemento y headinges un nombre arbitrario para la ranura.
EDITAR: para aclarar, básicamente no hay soporte para el navegador, por lo que esto fue principalmente para referencia futura/además de las "respuestas prácticas" proporcionadas ya.
Probablemente no sea posible porque sería muy fácil usar XSS. Además, los desinfectantes HTML actuales que están disponibles no rechazan contentla propiedad.
(Definitivamente no es la mejor respuesta aquí, pero solo quería compartir una idea distinta a "según las especificaciones ...")
Si tiene la posibilidad de agregar HTML en otra parte de la página, puede reposicionarlo sobre el área donde aparece su contenido CSS.
Entonces agregas tu contenido CSS:
.cssClass::after {
content: "Content and Words and Things";
color: #0000EE;
}
Agregué un hipervínculo azul para que parezca un enlace.
Luego agrega un href que no tiene texto entre las etiquetas con una identificación o clase a la que pueda hacer referencia. Puede estar en cualquier lugar siempre que esté en la misma página.
<a id="link" href="#"></a>
Y luego coloque el enlace sobre el contenido donde lo desee:
a#link{
height: 20px;
width: 100%;
left: 0;
top: 5%;
position: absolute;
}
