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"]
), ho bisogno di usare qualcosa che possa sostituire il testo.
Devo usare [
]
per farlo funzionare.
Devo sostituire “Fatti”.
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:
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:
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.
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
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."; }