Come posso sostituire il testo con CSS?

Come posso sostituire il testo con CSS usando un metodo come questo:

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

Invece di ( img[src*="IKON.img"] ), devo usare qualcosa che può sostituire il testo.

Devo usarlo [ ]per farlo funzionare.

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

Devo sostituire " Fatti ".

O forse potresti avvolgere 'Fatti' intorno a <span>come segue:

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

Quindi utilizzare:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Obbligatorio : questo è un trucco: CSS non è il posto giusto per farlo, ma in alcune situazioni - ad esempio, hai una libreria di terze parti in un iframe che può essere personalizzata solo dai CSS - questo tipo di hack è l'unica opzione .

È possibile sostituire il testo tramite CSS. Sostituiamo un pulsante verde con "ciao" con un pulsante rosso che dice "arrivederci" , usando CSS.

Prima:

Dopo:

Vedi http://jsfiddle.net/ZBj2m/274/ per una demo live:

Ecco il nostro pulsante verde:

<button>Hello</button>

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

Ora nascondiamo l'elemento originale, ma aggiungiamo un altro elemento a blocchi in seguito:

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

Nota:

• Abbiamo esplicitamente bisogno di contrassegnarlo come elemento a blocchi, gli elementi "after" sono in linea per impostazione predefinita
• Dobbiamo compensare l'elemento originale regolando la posizione dello pseudo-elemento.
• Dobbiamo nascondere l'elemento originale e visualizzare l'elemento pseudo utilizzando visibility. Nota display: nonesull'elemento originale non funziona.

Se sei disposto a utilizzare pseudo elementi e lascia che inseriscano contenuti, puoi procedere come segue. Non presuppone la conoscenza dell'elemento originale e non richiede markup aggiuntivi.

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

Esempio JSFiddle

Basato sulla risposta di mikemaccana , questo ha funzionato per me

button {
  position: absolute;
  visibility: hidden;
}

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

§ Posizionamento assoluto

un elemento posizionato in modo assoluto viene rimosso dal flusso e quindi non occupa spazio quando si posizionano altri elementi.

Questo è semplice, breve ed efficace. Non è necessario alcun HTML aggiuntivo.

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

Ho dovuto farlo per sostituire il testo del collegamento, diverso da casa, per pangrattato 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;
}

Non puoi, beh, puoi.

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

Questo inserirà il contenuto dopo il contenuto corrente dell'elemento. In realtà non lo sostituisce, ma puoi scegliere un div vuoto e utilizzare CSS per aggiungere tutto il contenuto.

Ma mentre più o meno puoi, non dovresti. Il contenuto effettivo deve essere inserito nel documento. La proprietà content è pensata principalmente per il markup di piccole dimensioni, come le virgolette attorno al testo che dovrebbero apparire tra virgolette.

Prova a usare :beforee :after. Uno inserisce il testo dopo il rendering dell'HTML e l'altro inserisce prima del rendering dell'HTML. Se si desidera sostituire il testo, lasciare vuoto il contenuto del pulsante.

Questo esempio imposta il testo del pulsante in base alla dimensione della larghezza dello schermo.

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

Pulsante di testo:

1. Con :before

   grande schermoxxx

   grande schermo

2. Con :after

   schermo xxxbig

   grande schermo

Se vuoi solo mostrare testi o immagini diversi, mantieni il tag vuoto e scrivi il tuo contenuto in più attributi di dati come quello <span data-text1="Hello" data-text2="Bye"></span>. Visualizzali con una delle pseudo classi:before {content: attr(data-text1)}

Ora hai un sacco di modi diversi per passare da uno all'altro. Li ho usati in combinazione con media query per un approccio di design reattivo per cambiare i nomi della mia navigazione in icone.

dimostrazione ed esempi di jsfiddle

_{Potrebbe non rispondere perfettamente alla domanda, ma ha soddisfatto le mie esigenze e forse anche altre.}

Ho avuto più fortuna a impostare l' font-size: 0elemento esterno e font-sizeil :afterselettore su tutto ciò di cui avevo bisogno.

Questo ha funzionato per me con il testo incorporato. È stato testato su Firefox, Safari, Chrome e 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;
}

Uso questo trucco:

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

L'ho persino usato per gestire l'internazionalizzazione delle pagine semplicemente cambiando una classe di base ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Sostituzione del testo con pseudo-elementi e visibilità 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.";
}

Utilizzando uno pseudo elemento, questo metodo non richiede la conoscenza dell'elemento originale e non richiede alcun markup aggiuntivo.

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

Questo implementa una casella di controllo come pulsante che mostra Sì o No a seconda del suo stato "controllato". Quindi dimostra un modo per sostituire il testo utilizzando CSS senza dover scrivere alcun codice.

Si comporterà comunque come una casella di controllo per quanto riguarda la restituzione (o non la restituzione) di un valore POST, ma dal punto di vista del display sembra un pulsante di attivazione / disattivazione.

I colori potrebbero non essere di tuo gradimento, sono solo lì per illustrare un punto.

L'HTML è:

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

... e il CSS è:

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

L'ho provato solo su Firefox, ma è CSS standard, quindi dovrebbe funzionare altrove.

A differenza di quello che vedo in ogni altra risposta, non è necessario utilizzare pseudo elementi per sostituire il contenuto di un tag con un'immagine

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

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

Questo non è davvero possibile senza trucchi. Ecco un modo che funziona sostituendo il testo con un'immagine di testo.

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

Questo tipo di cose viene in genere fatto con JavaScript. Ecco come si può fare con jQuery:

$('.pvw-title').text('new text');

Ho avuto un problema in cui dovevo sostituire il testo del collegamento, ma non potevo usare JavaScript né modificare direttamente il testo di un collegamento ipertestuale in quanto compilato da XML. Inoltre, non potevo usare gli pseudo elementi o non sembravano funzionare quando li avevo provati.

Fondamentalmente, ho messo il testo che volevo in un arco e ho messo il tag di ancoraggio sotto di esso e ho avvolto entrambi in un div. Fondamentalmente ho spostato il tag di ancoraggio tramite CSS e poi ho reso il carattere trasparente. Ora quando passi con il mouse sopra l'arco, "agisce" come un collegamento. Un modo davvero disordinato per farlo, ma è così che puoi avere un link con testo diverso ...

Questo è un violino di come ho risolto questo problema

Il mio 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>

Il mio CSS

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

Il CSS dovrà cambiare in base alle tue esigenze, ma questo è un modo generale di fare ciò che stai chiedendo.

Ho trovato una soluzione come questa in cui una parola, "Scura", verrebbe abbreviata in "D" su una larghezza dello schermo inferiore. Fondamentalmente devi solo rendere la dimensione del carattere del contenuto originale 0 e avere la forma abbreviata come pseudo elemento.

In questo esempio la modifica avviene invece al passaggio del mouse:

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>

Dopo otto anni, ho dovuto affrontare la stessa sfida quando cercavo di utilizzare l' estensione del browser Stylish per cambiare qualcosa su un sito Web (non mio). E questa volta l'ho fatto funzionare guardando il codice sorgente usando "inspect element" e ho creato il codice CSS basato su quello.

Questo è quello che sembrava prima:

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

Questo è lo stesso pezzo di HTML e CSS che ho usato per modificare lo stile:

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>

Puoi eseguire il codice sopra e vedrai che funziona (testato in Chrome).

_{Questo è semplicemente quello che volevo nei giorni in cui ho posto questa domanda.}

_{Stavo usando una specie di blog / Myspace della community cose simili di e l'unica cosa che hai avuto quando hai disegnato il tuo profilo era il loro editor CSS, ed è per questo che volevo selezionarlo in base allo stile.}

Ho trovato la risposta qui:

• Selettore CSS avanzato: selezionare in base allo stile

• Selettore CSS per attributo di stile incorporato

Il modo per farlo funzionare è aggiungere l'altezza della linea al contenuto CSS. Questo renderà il blocco visibile sopra il nascosto, quindi non nasconderà il testo modificato.

Esempio con utilizzo prima :

.pvw-title span {
  display: none;
}

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

Bene, come molti hanno detto questo è un trucco. Tuttavia, vorrei aggiungere un hack più aggiornato, che sfrutta flexboxe rem, ad esempio

• Non vuoi posizionare manualmente questo testo da modificare, ecco perché ti piacerebbe trarne vantaggio flexbox
• Non si desidera utilizzare paddinge / o marginutilizzare esplicitamente il testo px, che per schermi di dimensioni diverse su dispositivi e browser diversi potrebbe fornire output diversi

Ecco la soluzione, in breve si flexboxassicura che sia automaticamente posizionata perfettamente e che remsia un'alternativa più standardizzata (e automatizzata) per i pixel.

CodeSandbox con il codice qui sotto e l'output in una forma di screenshot, per favore leggi un notesotto il codice!

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: per tag diversi potrebbero essere necessari valori diversi di rem, questo è stato giustificato per h1e solo su schermi di grandi dimensioni. Tuttavia con @mediate potresti facilmente estenderlo ai dispositivi mobili.