Come posso sostituire il testo con i CSS?

O forse potresti racchiudere “fatti” intorno a come segue:

 
Facts 

Quindi utilizzare:

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

Obbligatorio : questo è un trucco: il 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 .

Puoi sostituire il testo tramite CSS. Sostituiamo un pulsante verde con “ciao” con un pulsante rosso che dice “addio” , usando i CSS. Vedi http://jsfiddle.net/ZBj2m/274/ per una demo dal vivo:

Ecco il nostro pulsante verde:

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

Ora nascondiamo l’elemento originale, ma aggiungiamo un altro elemento di blocco 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 un elemento di blocco, gli elementi ‘after’ sono span di default
• Abbiamo bisogno di compensare l’elemento originale regolando la posizione dello pseudo-elemento.
• Dobbiamo hide l’elemento originale e mostrare lo pseudo elemento usando la visibility . display: none note display: none sull’elemento originale non funziona.

Se sei disposto ad usare pseudo elementi e permetti loro di inserire contenuti, puoi fare quanto segue. Non presuppone la conoscenza dell’elemento originale e non richiede ulteriori markup.

 .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

Sulla base della 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 estratto dal stream e quindi non occupa spazio quando posiziona altri elementi.

Semplice, breve, 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 link, diverso da casa, per il pane grattugiato

SASS / MENO

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

Ciò inserirà il contenuto dopo il contenuto corrente dell’elemento. In realtà non lo sostituisce, ma puoi scegliere un div vuoto e usare i CSS per aggiungere tutto il contenuto.

Ma mentre tu puoi più o meno, non dovresti. Il contenuto effettivo dovrebbe essere inserito nel documento. La proprietà content è principalmente intesa per piccoli markup, come le virgolette attorno al testo che dovrebbero apparire tra virgolette.

Prova a usare: prima e: dopo. Uno inserisce il testo dopo il rendering dell’HTML, gli altri inserti prima del rendering HTML. Se si desidera sostituire il testo, lasciare il contenuto del pulsante vuoto.

Questo esempio imposta il testo del pulsante in base alle dimensioni della larghezza dello schermo.

    xxx   

Testo del pulsante:

1) con: prima

grande schermoxxx

grande schermo

2) con: dopo

schermo xxxbig

grande schermo

Questo ha funzionato per me con testo in linea. Testato in FF, Safari, Chrome e Opera

 
Lorem ipsum dolor sit amet, consectetur Some Text adipiscing elit.
 span { visibility: hidden; word-spacing:-999px; letter-spacing: -999px; } span:after { content: "goodbye"; visibility: visible; word-spacing:normal; letter-spacing:normal; } 

Io 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 class base …

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

Potrebbe non rispondere perfettamente alla domanda, ma ha soddisfatto i miei bisogni e forse anche altri.

Quindi, se vuoi mostrare solo testi o immagini diversi, tieni il tag vuoto e scrivi il tuo contenuto in più attributi di dati come . 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 le query multimediali per un approccio di progettazione reattivo per cambiare i nomi della mia navigazione in icone.

dimostrazione ed esempi di jsfiddle

Ho avuto la fortuna di impostare la font-size: 0 del font-size: 0 dell’elemento esterno e la font-size del carattere del selettore :after a ciò di cui avevo bisogno.

Usando 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 un pulsante che mostra Sì o No a seconda del suo stato ‘controllato’. Quindi dimostra un modo per sostituire il testo usando i CSS senza dover scrivere alcun codice.

Continuerà a comportarsi come una casella di controllo fino a restituire (o non restituire) un valore POST, ma da un punto di vista del display sembra un pulsante di triggerszione / distriggerszione.

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

L’HTML è:

… e il CSS è:

 /* --------------------------------- */ /* Make the checkbox non-displayable */ /* --------------------------------- */ input[type="checkbox"].yesno { display:none; } /* --------------------------------- */ /* Set the associated label  */ /* 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  is "No" */ /* --------------------------------- */ input[type="checkbox"].yesno+label span:after { content:"No"; } /* --------------------------------- */ /* When the box is checked the */ /* content after the label  */ /* 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  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.

Questo non è davvero ansible 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 è tipicamente fatto con Javascript. Ecco come può essere fatto con jQuery:

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

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

Fondamentalmente, ho inserito il testo che volevo in un intervallo e ho inserito il tag di ancoraggio al di sotto e avvolto in un div. Fondamentalmente ho spostato il tag di ancoraggio tramite css e ho reso il font trasparente. Ora, quando si passa il mouse sopra lo span, “agisce” come un collegamento. Un modo davvero hacky per farlo, ma è così che puoi avere un link con testo diverso …

Questo è un esempio di come sono riuscito a risolvere questo problema

Il mio HTML

 
 This is your link text
 This is your actual link  

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.

Modifica: Qualcuno può dirmi perché questo è stato downvoted? La mia soluzione funziona …

A differenza di ciò che vedo in ogni altra risposta, non è necessario utilizzare pseudo elementi per sostituire il contenuto di una balise con un’immagine

I fatti

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

Sostituzione del testo con pseudo-elementi e visibilità CSS

HTML

 
Original Text 

CSS

 .replaced { visibility: hidden; position: relative; } .replaced:after { visibility: visible; position: absolute; top: 0; left: 0; content: "This text replaces the original."; }