Wie kann ich Text durch CSS ersetzen?

Oder Sie könnten 'Fakten' wie folgt um einen <span> wickeln:

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

Dann benutze:

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

Obligatory: Dies ist ein Hack: CSS ist nicht der richtige Ort dafür, aber in einigen Situationen - z. B. haben Sie eine Bibliothek eines Drittanbieters in einem Iframe, der nur von CSS angepasst werden kann - diese Art von Hack ist die einzige Option.

Sie können Text durch CSS ersetzen. Ersetzen Sie einen grünen Button durch 'Hallo' durch einen roten Button, der 'Auf Wiedersehen' sagt, indem Sie CSS verwenden. Siehe http://jsfiddle.net/ZBj2m/274/ für eine Live-Demo:

Hier ist unser grüner Knopf:

<button>Hello</button>

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

Lassen Sie uns nun das ursprüngliche Element ausblenden, aber danach ein weiteres Blockelement hinzufügen:

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

Hinweis:

• Wir müssen dies explizit als Blockelement markieren, standardmäßig sind 'after'-Elemente überbrückt
• Wir müssen das ursprüngliche Element durch Anpassen der Position des Pseudoelements kompensieren. 
• Wir müssen das ursprüngliche Element ausblenden und das Pseudoelement mit visibility anzeigen. Hinweis display: none auf dem ursprünglichen Element funktioniert nicht.

Wenn Sie Pseudo-Elemente verwenden und Inhalte einfügen möchten, können Sie Folgendes tun. Es setzt nicht die Kenntnis des ursprünglichen Elements voraus und erfordert keine zusätzlichen Markierungen.

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

Basierend auf mikemaccanas Antwort ,

button {
  position: absolute;
  visibility: hidden;
}

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

§ Absolute Positionierung

ein Element, das absolut positioniert ist, wird aus dem Fluss genommen und damit nimmt beim Platzieren anderer Elemente keinen Platz ein.

Einfach, kurz, effektiv. Keine zusätzliche HTML-Datei erforderlich.

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

Ich musste dies tun, um Link-Text für Home-Breadcrumbs außer Home zu ersetzen

SASS/WENIGER

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

Sie können nicht, gut können Sie. 

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

Dadurch wird content after der aktuelle Inhalt des Elements eingefügt. Es ersetzt es nicht wirklich, aber Sie können sich für ein leeres div entscheiden und CSS verwenden, um den gesamten Inhalt hinzuzufügen.

Aber während Sie mehr oder weniger können, sollten Sie nicht. Der tatsächliche Inhalt sollte in das Dokument aufgenommen werden. Die content -Eigenschaft ist hauptsächlich für kleine Markierungen gedacht, z. B. in Anführungszeichen, die in Anführungszeichen stehen sollen.

Versuchen Sie es mit: before und: after. Einer fügt nach dem Rendern von HTML Text ein, der andere fügt vor dem Rendern HTML ein. Wenn Sie Text ersetzen möchten, lassen Sie den Inhalt der Schaltfläche leer.

In diesem Beispiel wird der Schaltflächentext entsprechend der Größe der Bildschirmbreite festgelegt.

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

Schaltflächentext:

1) mit: vorher

großer screenxxx

großer Bildschirm

2) mit: nach

xxxbig Bildschirm

großer Bildschirm

Es kann die Frage nicht perfekt beantworten, aber es hat meine Bedürfnisse und vielleicht auch andere erfüllt.

Wenn Sie also nur verschiedene Texte oder Bilder anzeigen möchten, lassen Sie das Tag leer und schreiben Sie Ihren Inhalt in mehrere Datenattribute wie <span data-text1="Hello" data-text2="Bye"></span>. Anzeige mit einer der Pseudoklassen :before {content: attr(data-text1)}

Jetzt haben Sie verschiedene Möglichkeiten, um zwischen ihnen zu wechseln. Ich habe sie in Kombination mit Medienabfragen für einen Responsive Design-Ansatz verwendet, um die Namen meiner Navigation in Symbole zu ändern. 

jsfiddle Demonstration und Beispiele

Das funktionierte für mich mit Inline-Text. Getestet in FF, Safari, Chrome und 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; 
}

Ich benutze diesen Trick:

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

Ich habe dies sogar verwendet, um die Internationalisierung von Seiten durch einfaches Ändern einer Basisklasse zu bewältigen ...

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

Ich hatte besseres Glück, den font-size: 0 des äußeren Elements und den font-size des :after-Selektors auf das zu setzen, was ich brauchte.

Ersetzen von Text durch Pseudoelemente und CSS-Sichtbarkeit

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

Bei Verwendung eines Pseudoelements erfordert diese Methode keine Kenntnis des ursprünglichen Elements und keine zusätzliche Markierung.

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

Dadurch wird ein Kontrollkästchen als Schaltfläche implementiert, die je nach aktiviertem Status entweder Ja oder Nein anzeigt. Es zeigt also eine Möglichkeit, Text mit CSS zu ersetzen, ohne Code schreiben zu müssen.

Es verhält sich immer noch wie ein Ankreuzfeld, bis ein POST - Wert zurückgegeben wird (oder nicht zurückgegeben wird), aber aus Sicht der Anzeige sieht es aus wie eine umschaltbare Schaltfläche.

Die Farben mögen nicht nach Ihrem Geschmack sein, sie dienen nur dazu, einen Punkt zu veranschaulichen.

Der HTML-Code lautet:

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

... und das CSS ist:

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

Ich habe es nur mit Firefox ausprobiert, aber es ist Standard-CSS, also sollte es woanders funktionieren.

Ich hatte ein Problem, bei dem ich den Text des Links ersetzen musste, aber weder Javascript verwenden noch den Text eines Hyperlinks direkt ändern konnte, da er aus XML-Dateien kompiliert wurde. Ich konnte auch keine Pseudo-Elemente verwenden, oder sie schienen nicht zu funktionieren, als ich sie ausprobiert hatte.

Grundsätzlich habe ich den Text, den ich wollte, in eine Spannweite gebracht und den Anker-Tag darunter platziert und beides in ein div verpackt. Im Grunde habe ich den Anker-Tag per css nach oben verschoben und die Schrift transparent gemacht. Wenn Sie nun über die Spannweite schweben, "wirkt" es wie ein Link. Eine wirklich harte Art, dies zu tun, aber so können Sie einen Link mit anderem Text haben ...

Dies ist eine Geige, wie ich dieses Problem umgehen konnte

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

Mein CSS

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

Das CSS muss sich je nach Ihren Anforderungen ändern. Dies ist jedoch ein allgemeiner Weg, um das zu tun, was Sie verlangen.

Edit: Kann mir jemand sagen, warum dies abgelehnt wurde? Meine Lösung funktioniert ...

Im Gegensatz zu dem, was ich in jeder anderen Antwort sehe, verwenden Sie brauchen nicht Pseudoelemente, um den Inhalt einer Balise durch ein Bild zu ersetzen

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

Ohne Tricks ist das nicht wirklich möglich. Dies ist eine Möglichkeit, die den Text durch ein Textbild ersetzt.

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

Diese Art von Dingen wird normalerweise mit Javascript ausgeführt. So geht das mit jQuery:

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

um dies zu erreichen, müssen Sie die Zeilenhöhe der CSS erhöhen. Dadurch wird der Block oberhalb des Verborgenen sichtbar, sodass der geänderte Text nicht ausgeblendet wird.

beispiel mit use before :

.pvw-title span {
  display: none;
}

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