2012-04-18 11 views
15

¿Cómo reemplazo "Marcadores" con "Enlaces" usando CSS?¿Cómo usar CSS para reemplazar o cambiar texto?

<div class="lfr-panel-title"> 
    <span> Bookmarks </span> 
</div> 

Sé que CSS no fue diseñado para esto, pero ¿hay una forma de navegador cruzado?

+2

No puede reemplazar contenido con CSS. – Simone

+2

¿Existe alguna forma de navegador cruzado para hacer algo con CSS para el que no se diseñó CSS? –

+1

@loktar es correcto, pero el concepto es incorrecto. CSS es para el estilo, mientras que el marcado es para el contenido. Estoy seguro de que sabes esto ... y esto es solo para UNA regla, ¿verdad? Ah, pero luego vamos a hacerlo aquí abajo, y allí, y así sucesivamente. Se pone pegajoso muy rápido, por no mencionar el hecho de que los motores de búsqueda y lectores de pantalla seguirán leyendo "marcadores". – Bosworth99

Respuesta

29

Usted podría hacer algo tan loco como este.

live demo

.lfr-panel-title span{ 
    display:none; 
} 

.lfr-panel-title:after{ 
    content: "links"; 
}​ 

Pero como todo el mundo señala .. no es recomendable.

+1

Funciona. Pero es un concepto tan retrógrado. +1. – Bosworth99

+1

@ Bosworth99 jaja, sí lo sé, pero quería intentarlo todavía. – Loktar

+0

¡Esto es exactamente lo que quería! ¡Gracias! – Bruno

5

CSS no cambio o reemplazan texto exacto.

Necesita utilizar algún tipo de lenguaje del lado del cliente (JavaScript, jQuery, etc.) o el lenguaje del lado del servidor (php, ASP.NET, etc.) para lograr eso.


Como @Loktar states, puede imitan esa funcionalidad a través de los :before y :after seudo selectores.

Aunque no se recomienda para ese uso, y no es totalmente compatible con varios navegadores cuando se tiene en cuenta IE. Mira la tabla de compatibilidad entre navegadores a través de QuirksMode:

:before :after cross-browser chart

+1

vea http://stackoverflow.com/questions/10212879/how-to-use-css-to-replace-or-change-text/10212932#comment13117543_10212932 – rlemon

0

Respuesta corta: no.

Respuesta larga: CSS no tiene la intención, o es muy capaz, de manipular contenido. Podría reemplazar el texto usando una imagen de fondo, pero eso no es muy accesible. Las diversas técnicas: after o: before tampoco serían compatibles con muchos navegadores.

Necesitará javascript para manipular el contenido de esta manera.

+0

¿Podría posiblemente entrar en más detalles sobre qué navegadores no lo hacen? soportar los selectores de pseudo-elemento? [porque parece que IE7 es el único por el que debería preocuparme] (http://caniuse.com/#feat=css-gencontent) – rlemon

Cuestiones relacionadas