¿Cómo puedo reemplazar el texto con CSS?

321

¿Cómo puedo reemplazar el texto con CSS usando un método como este:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

En lugar de ( img[src*="IKON.img"] ), necesito usar algo que pueda reemplazar el texto.

Tengo que usar [ ]para que funcione.

<div class="pvw-title">Facts</div>

Necesito reemplazar " Hechos ".

Mokita
fuente
Para ser honesto, podría ser mejor usar JavaScript para esto.
Sir
El uso de Javascript requiere que se cargue el DOM, por lo que hay un FOUC. Quiero hacer esto para reemplazar el texto con contenido extraído de la cadena de consulta mientras evito un FOUC sin tener que generar el lado del servidor HTML (permitiendo así que el HTML se almacene en caché agresivamente y se sirva desde un CDN).
nemequ
32
La pregunta es cómo hacerlo con CSS. Yo estoy usando un CMS que sólo me permite cambiar el CSS, por lo que llegué a esta página, mientras que google para la respuesta, y no una diferente. Es por eso que respondemos a la pregunta que se hizo en lugar de preguntar por qué la situación del autor no es diferente.
Felwithe

Respuestas:

291

O tal vez podría envolver 'Hechos' alrededor de a de la <span>siguiente manera:

<div class="pvw-title"><span>Facts</span></div>

Luego usa:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}
Matthew Cachia
fuente
52
Bien, pero eso es un cambio a HTML en lugar de solo CSS.
mikemaccana
22
A veces es tu única opción
locrizak
44
span {display: none; } también debe ocultar el pseudo elemento. Debería usar visibilidad: oculto en su lugar
xryl669
2
pantalla: ninguno; y visibilidad: oculta; ambos esconden el pseudo elemento
Facundo Colombier
10
@Mathew se esconde el lapso pero añadiendo el elemento seudo a la div, por lo que el elemento de seudo no debe ser ocultada (ya sea mediante el uso de visibilidad o propiedad display)
dewtea
249

Obligatorio : este es un hack: CSS no es el lugar adecuado para hacer esto, pero en algunas situaciones, por ejemplo, tiene una biblioteca de terceros en un iframe que solo puede ser personalizada por CSS, este tipo de hack es la única opción .

Puede reemplazar el texto a través de CSS. Reemplacemos un botón verde con 'hola' con un botón rojo que dice 'adiós' , usando CSS.

Antes de:

ingrese la descripción de la imagen aquí

Después:

ingrese la descripción de la imagen aquí

Ver http://jsfiddle.net/ZBj2m/274/ para una demostración en vivo:

Aquí está nuestro botón verde:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Ahora ocultemos el elemento original, pero agreguemos otro elemento de bloque después:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Nota:

  • Necesitamos explícitamente marcar esto como un elemento de bloque, los elementos 'después' están en línea por defecto
  • Necesitamos compensar el elemento original ajustando la posición del pseudo-elemento.
  • Debemos ocultar el elemento original y mostrar el pseudo elemento usando visibility. Nota display: nonesobre el elemento original no funciona.
mikemaccana
fuente
2
Esto no funciona en ie 10, ¿alguna idea de cómo modificarlo para hacerlo?
Solmead
49
display: none;no funciona porque ::afterrealmente significa "dentro de este elemento, pero al final", en caso de que alguien tuviera curiosidad.
Ry-
44
Desafortunadamente, el botón "modificado" ya no funciona como un botón. Es un buen ejemplo, solo que no se aplica a un botón.
xryl669
1
pantalla: ninguno; y visibilidad: oculta; ambos esconden el pseudo elemento
Facundo Colombier
¿Cómo es que cuando hago esto, reemplaza el elemento pero el texto es todo en mayúsculas y no se puede cambiar a minúsculas?
Jpaji Rajnish
159

Si está dispuesto a usar pseudo elementos y dejar que inserten contenido, puede hacer lo siguiente. No asume el conocimiento del elemento original y no requiere marcado adicional.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

JSFiddle Ejemplo

James van Dyke
fuente
1
Esta respuesta funciona en lugares donde otras respuestas no, como los nodos de texto dentro de un <th>elemento.
Chris Kerekes
55
Esto funciona bien En mi caso, line-height: 0y color: transparenten el elemento principal y el restablecimiento de esos valores en el pseudo hacer el trabajo (sin jugar con text-indent)
dontGoPlastic
1
¿No debería ser en line-height: normallugar de initial?
Benjamin
1
la razón para usar sangría de texto es que si el texto original es más largo, el elemento sigue siendo el tamaño del texto anterior, sin reducirse al tamaño del texto nuevo (suponiendo que eso sea lo que desea)
Chris Janssen
La sangría de texto: -9999px; Funciona en IE. Mientras que la visibilidad: oculta; El método no funciona en IE.
Tom Stermitz
57

Basado en la respuesta de mikemaccana , esto funcionó para mí

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Posicionamiento absoluto

un elemento que se posiciona absolutamente se saca del flujo y, por lo tanto, no ocupa espacio al colocar otros elementos.

Steven Penny
fuente
2
Para mí, esta respuesta fue superior a otras porque funciona con un reemplazo de texto dentro de la misma línea, es decir, no fuerza un salto de línea en el texto (para mi combinación particular de HTML y CSS).
pgr
30

Esto es simple, breve y efectivo. No se necesita HTML adicional.

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

Tuve que hacer esto para reemplazar el texto del enlace, que no sea el hogar, para las migas de pan de WooCommerce

Sass / Less

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}
hawkeye126
fuente
22

No puedes, bueno, puedes.

.pvw-title:after {
  content: "Test";
}

Esto insertará contenido después del contenido actual del elemento. En realidad no lo reemplaza, pero puede elegir un div vacío y usar CSS para agregar todo el contenido.

Pero mientras más o menos puedas, no deberías. El contenido real se debe poner en el documento. La propiedad de contenido está destinada principalmente a marcas pequeñas, como comillas alrededor del texto que debe aparecer entre comillas.

GolezTrol
fuente
Estoy muy seguro de que usé un código para reemplazar el texto con ese tipo de método ... '<div class = "pvw-title"> Hechos </div> <div class = "pvw-title"> Hechos </ div> 'No puedo usar: después, porque obtuve más de una clase div con el mismo nombre :(
MokiTa
¿Cuán ampliamente compatible es eso para los navegadores? Y sospecho que JavaScript será una mejor opción a largo plazo para este tipo de flexibilidad.
Sir
Los navegadores modernos lo admiten. No estoy seguro de las versiones anteriores de IE, pero supongo que se puede consultar en quirksmode.com. -editar- Puede: quirksmode.org/css/user-interface/content.html
GolezTrol
15

Intenta usar :beforey :after. Uno inserta texto después de renderizar HTML y el otro inserta antes de renderizar HTML. Si desea reemplazar el texto, deje el contenido del botón vacío.

Este ejemplo establece el texto del botón de acuerdo con el tamaño del ancho de la pantalla.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Botón de texto:

  1. Con :before

    gran pantallaxxx

    pantalla grande

  2. Con :after

    pantalla xxxbig

    pantalla grande

vive el amor
fuente
11

Si solo desea mostrar diferentes textos o imágenes, mantenga la etiqueta vacía y escriba su contenido en múltiples atributos de datos como ese <span data-text1="Hello" data-text2="Bye"></span>. Mostrarlos con una de las pseudo clases:before {content: attr(data-text1)}

Ahora tiene muchas formas diferentes de cambiar entre ellas. Los usé en combinación con consultas de medios para un enfoque de diseño receptivo para cambiar los nombres de mi navegación a íconos.

Demostración jsfiddle y ejemplos

Puede que no responda perfectamente la pregunta, pero satisfizo mis necesidades y tal vez otras también.

Robbendebiene
fuente
10

Tuve mejor suerte al configurar el font-size: 0elemento externo y font-sizeel :afterselector a lo que necesitaba.

Jerome
fuente
1
Esto funciona bien Aquí hay una demostración .
Arthur
9

Esto funcionó para mí con texto en línea. Fue probado en Firefox, Safari, Chrome y Opera.

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}
Noel Williams
fuente
2
No funciona para mí al menos en IE 9 a 11 debido a que ignora la "visibilidad: visible" en el elemento: after: stackoverflow.com/questions/17530947/…
thenickdude
8

Yo uso este truco:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Incluso he usado esto para manejar la internacionalización de páginas simplemente cambiando una clase base ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}
Pete OK
fuente
3
Esto es problemático para los usuarios con lectores de pantalla. Si no cambia la distorsión / visibilidad del elemento y no proporciona ninguna sugerencia de aria, su texto "invisible" aún puede ser leído por un lector de pantalla.
Compilador conspicuo el
8

Reemplazo de texto con pseudoelementos y visibilidad CSS

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}
Ahsan Aftab
fuente
3

Usando un pseudo elemento, este método no requiere conocimiento del elemento original y no requiere ningún marcado adicional.

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}
Vin
fuente
2

Esto implementa una casilla de verificación como un botón que muestra Sí o No dependiendo de su estado 'marcado'. Por lo tanto, demuestra una forma de reemplazar texto usando CSS sin tener que escribir ningún código.

Todavía se comportará como una casilla de verificación en cuanto a devolver (o no devolver) un valor POST, pero desde el punto de vista de la pantalla parece un botón de alternar.

Los colores pueden no ser de su agrado, solo están ahí para ilustrar un punto.

El HTML es:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... y el CSS es:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Solo lo he probado en Firefox, pero es CSS estándar, por lo que debería funcionar en otro lugar.

Steve Douglas
fuente
2

A diferencia de lo que veo en todas las otras respuestas, no es necesario usar pseudo elementos para reemplazar el contenido de una etiqueta con una imagen

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }
Estecka
fuente
2
A partir de CSS2, contentsolo se aplica a :beforey :after. CSS3 lo extiende a todo, pero el módulo de Contenido generado todavía está en estado de borrador, por lo que es muy probable que cualquier uso dependa del navegador.
mrec
1
¿Qué es un "balise" ? No " 1. (Sistema europeo de control de trenes) Una baliza electrónica o transpondedor colocado entre los rieles de un railw " , supongo. (Responda editando su pregunta , no aquí en los comentarios).
Peter Mortensen
1

Esto no es realmente posible sin trucos. Aquí hay una manera que funciona reemplazando el texto con una imagen de texto.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

Este tipo de cosas generalmente se realiza con JavaScript. Así es como se puede hacer con jQuery:

$('.pvw-title').text('new text');
Nathan Manousos
fuente
3
Tampoco puedo usar Javascript: /
MokiTa
1
Esta es la única forma en que creo que podría funcionar: .pvw-title span [style * = "color: # 000, font-size: 14px;"] {visibilidad: oculto; } .pvw-title span [style * = "color: # 000; font-size: 14px;"]: after {visibilidad: visible; color: # 000; tamaño de fuente: 14px; contenido: "Prueba"; } pero, dado que ambos usan el mismo estilo, no puedo hacerlo ...: /
MokiTa
¿Por qué lo seleccionarías en función del color / fuente?
Nathan Manousos
Lo seleccionaría en función de todo el estilo, para poder editar ese título específico y no ambos, ya que ambos tienen el mismo nombre "div".
MokiTa
1

Tuve un problema en el que tuve que reemplazar el texto del enlace, pero no pude usar JavaScript ni pude cambiar directamente el texto de un hipervínculo ya que se compiló desde XML. Además, no podía usar pseudo elementos, o no parecían funcionar cuando los probé.

Básicamente, puse el texto que quería en un espacio y puse la etiqueta de anclaje debajo de él y los envolví en un div. Básicamente moví la etiqueta de anclaje a través de CSS y luego hice que la fuente fuera transparente. Ahora, cuando pasa el mouse sobre el lapso, "actúa" como un enlace. Una forma realmente hacky de hacerlo, pero así es como puedes tener un enlace con texto diferente ...

Este es un violín de cómo resolví este problema

Mi HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

Mi CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

El CSS tendrá que cambiar según sus requisitos, pero esta es una forma general de hacer lo que está pidiendo.

Todopoderoso
fuente
1
@Almight: ¿Por qué sospecho que esto fue rechazado porque esta solución requiere modificar el marcado y sospecho que si el OP podría modificar el marcado, él / ella simplemente cambiaría el texto directamente. En otras palabras, el OP requería una solución única de CSS
dannie.f
1

Encontré una solución como esta donde una palabra, "Oscuro", se acortaría a solo "D" en un ancho de pantalla más pequeño. Básicamente, simplemente hace que el tamaño de fuente del contenido original sea 0 y tiene la forma abreviada como un pseudo elemento.

En este ejemplo, el cambio ocurre al pasar el mouse sobre su lugar:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}
<span>Dark</span>

StefanBob
fuente
1

Después de ocho años, enfrenté el mismo desafío al tratar de usar la extensión del navegador Stylish para cambiar algo en un sitio web (no el mío). Y esta vez lo hice funcionar mirando el código fuente usando "inspeccionar elemento" y creé el código CSS basado en eso.

Así es como se veía antes:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Este es el mismo fragmento de HTML y CSS que utilicé para modificar el estilo:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}
<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Puede ejecutar el código anterior y verá que funciona (probado en Chrome).


Esto es simplemente lo que quería en los días en que hice esta pregunta.

Estaba usando algún tipo de blog de la comunidad / cosas similares de Myspace y lo único que tenía al diseñar su perfil era su editor CSS, y por eso quería seleccionarlo en función del estilo.

Encontré la respuesta aquí:

Mokita
fuente
0

La forma de hacer que esto funcione es agregar altura de línea al contenido CSS. Esto hará que el bloque se vea por encima de lo oculto, por lo tanto, esto no ocultará el texto modificado.

Ejemplo con uso antes :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}
Tal Talmon
fuente
0

Bueno, como muchos dijeron, esto es un truco. Sin embargo, me gustaría agregar un truco más actualizado, que aprovecha flexboxy rem, es decir,

  • No desea posicionar manualmente este texto para cambiarlo, por eso le gustaría aprovechar flexbox
  • No desea usar paddingy / o usar marginel texto explícitamente px, lo que para diferentes tamaños de pantalla en diferentes dispositivos y navegadores puede dar una salida diferente

Aquí está la solución, en resumen, flexboxse asegura de que se posicione automáticamente de manera perfecta y remsea ​​una alternativa más estandarizada (y automatizada) para píxeles.

CodeSandbox con el código a continuación y salida en forma de captura de pantalla, ¡lea noteel código debajo!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

Nota: para diferentes etiquetas puede que necesite diferentes valores rem, esta se ha justificado h1y solo en pantallas grandes. Sin embargo, con @mediausted podría extender esto fácilmente a dispositivos móviles.

Un truco para reemplazar texto HTML usando CSS

Daniel Danielecki
fuente