2011-05-03 12 views
140

Me pregunto si lo siguiente es posible. Sé que no funciona, pero tal vez no lo estoy escribiendo con la sintaxis correcta.Usando: antes y después del selector de CSS para insertar Html

li.first div.se_bizImg:before{ 
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span></h1>"; 
} 

¿Alguna pregunta sobre esto?

+1

Tenga en cuenta que este * no * es un duplicado. La otra pregunta pregunta específicamente sobre '
' o salto de línea, y las respuestas dan soluciones a ese caso especial. No ayudará si desea agregar etiquetas de encabezado y extensión. – JJJ

+0

Sí, esto no debe marcarse como duplicado. La otra pregunta pregunta sobre una etiqueta específica. Además, las respuestas en este caso son mucho más útiles y fáciles de encontrar en los motores de búsqueda. – Vik

Respuesta

190

content no admite HTML, solo texto. Probablemente deberías usar jQuery o algo así.

Otro problema con su código es " dentro de un bloque ". Debe mezclar ' y " (class='headingDetail').

Si content admitió HTML, podría terminar en un bucle infinito donde content se agrega dentro de content.

+60

@Foxinni la razón más importante para no permitir html dentro del parámetro de contenido es el hecho de que CSS está diseñado para funcionar en una sola transferencia de la página. Si hubiera html, sería necesario diseñarlo, lo que significa que el CSS tendría que volver y procesarse de nuevo para darle un estilo a ese HTML una vez que se haya terminado de diseñar todo lo demás. Esta funcionalidad extra raramente sería utilizada por cualquier persona, pero aun así tendría un costo de velocidad para todos. –

+10

Creo que la razón más fundamental para no permitir html en el contenido son los enormes riesgos de seguridad involucrados en eso. Cualquier sitio que permita CSS personalizado estaría enormemente abierto a los ataques XSS. –

+2

Otra posibilidad es utilizar los componentes web estándar emergentes en lugar de css. Entonces podrías hacer algo como eso. http://www.w3.org/TR/components-intro/#defining-a-custom-element –

Cuestiones relacionadas