¿Cómo puedo reemplazar el texto con CSS?

¿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 ".

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';
}

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:

Después:

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.

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

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.

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;
}

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.

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

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.}

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

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;
}

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!';
}

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.";
}

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;
}

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.

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");
    }

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');

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.

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>

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í:

• Selector avanzado de CSS: selección basada en el estilo

• Selector CSS por atributo de estilo en línea

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
}

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.