Wie kann ich Text durch CSS ersetzen?

Wie kann ich Text mit einer Methode wie der folgenden durch CSS ersetzen:

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

Anstelle von ( img[src*="IKON.img"] ) muss ich stattdessen etwas verwenden, das Text ersetzen kann.

Ich muss es benutzen [ ], um es zum Laufen zu bringen.

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

Ich muss " Fakten " ersetzen .

Oder vielleicht könnten Sie 'Fakten' <span>wie folgt umschließen:

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

Obligatorisch : Dies ist ein Hack: CSS ist nicht der richtige Ort, um dies zu tun, aber in einigen Situationen - z. B. wenn Sie eine Drittanbieter-Bibliothek in einem Iframe haben, der nur von CSS angepasst werden kann - ist diese Art von Hack die einzige Option .

Sie können Text über CSS ersetzen. Ersetzen wir eine grüne Schaltfläche durch "Hallo" durch eine rote Schaltfläche mit der Aufschrift "Auf Wiedersehen" mithilfe von CSS.

Vor:

Nach:

Eine Live-Demo finden Sie unter http://jsfiddle.net/ZBj2m/274/ :

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 anschließend 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 ausdrücklich als Blockelement markieren, 'after'-Elemente sind standardmäßig inline
• Wir müssen das ursprüngliche Element kompensieren, indem wir die Position des Pseudoelements anpassen.
• Wir müssen das ursprüngliche Element ausblenden und das Pseudoelement mit anzeigen visibility. Hinweis display: nonezum Originalelement funktioniert nicht.

Wenn Sie bereit sind, Pseudoelemente zu verwenden und sie Inhalte einfügen zu lassen, können Sie Folgendes tun. Es setzt keine Kenntnis des ursprünglichen Elements voraus und erfordert kein zusätzliches 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 */
}

JSFiddle-Beispiel

Basierend auf Mikemaccanas Antwort funktionierte dies für mich

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 nimmt daher beim Platzieren anderer Elemente keinen Platz ein.

Dies ist einfach, kurz und effektiv. Es ist kein zusätzlicher HTML-Code 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 anderen Linktext als Home für WooCommerce- Brotkrumen zu ersetzen

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

Sie können nicht, na ja, Sie können.

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

Dadurch wird der Inhalt nach dem aktuellen Inhalt des Elements eingefügt. Es ersetzt es nicht wirklich, aber Sie können ein leeres div auswählen 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 Eigenschaft content ist hauptsächlich für kleine Markups gedacht, z. B. Anführungszeichen um Text, der in Anführungszeichen gesetzt werden soll.

Versuchen Sie es mit :beforeund:after . Einer fügt Text ein, nachdem HTML gerendert wurde, und der andere fügt Text ein, bevor HTML gerendert wurde. 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 :before

   großer Bildschirmxxx

   großer Bildschirm

2. Mit :after

   xxxbig Bildschirm

   großer Bildschirm

Wenn Sie nur verschiedene Texte oder Bilder angezeigt werden sollen, halten das Tag leer und Ihre Inhalte in mehreren Datenattribute schreiben so <span data-text1="Hello" data-text2="Bye"></span>. Zeigen Sie sie mit einer der Pseudoklassen an:before {content: attr(data-text1)}

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

jsfiddle Demonstration und Beispiele

_{Es mag die Frage nicht perfekt beantworten, aber es hat meine Bedürfnisse und vielleicht auch andere befriedigt.}

Ich hatte besseres Glück, das font-size: 0äußere Element und das font-sizedes :afterSelektors auf alles einzustellen, was ich brauchte.

Dies funktionierte bei mir mit Inline-Text. Es wurde in Firefox, Safari, Chrome und Opera getestet.

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

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

Textersetzung 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 kein zusätzliches Markup.

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

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

Es verhält sich immer noch wie ein Kontrollkästchen, wenn ein POST-Wert zurückgegeben wird (oder nicht zurückgegeben wird), aber aus Sicht der Anzeige sieht es aus wie eine Umschalttaste.

Die Farben mögen nicht Ihren Wünschen entsprechen, 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 unter Firefox versucht, aber es ist Standard-CSS, daher sollte es woanders funktionieren.

Im Gegensatz zu dem, was ich in jeder anderen Antwort sehe, müssen Sie keine Pseudoelemente verwenden, um den Inhalt eines Tags durch ein Bild zu ersetzen

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

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

Dies ist ohne Tricks nicht wirklich möglich. Hier ist eine Möglichkeit, den Text durch ein Textbild zu ersetzen.

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

Ich hatte ein Problem, bei dem ich den Linktext ersetzen musste, aber ich konnte weder JavaScript verwenden noch den Text eines Hyperlinks direkt ändern, da dieser aus XML kompiliert wurde. Außerdem konnte ich keine Pseudoelemente verwenden, oder sie schienen nicht zu funktionieren, als ich sie ausprobiert hatte.

Grundsätzlich habe ich den gewünschten Text in eine Spanne eingefügt und das Ankertag darunter gelegt und beide in ein Div gewickelt. Ich habe das Ankertag im Grunde genommen über CSS nach oben verschoben und dann die Schriftart transparent gemacht. Wenn Sie jetzt über die Spanne fahren, "verhält" es sich wie ein Link. Eine wirklich hackige Art, dies zu tun, aber so können Sie einen Link mit einem anderen Text haben ...

Dies ist eine Frage, wie ich dieses Problem umgangen habe

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 eine allgemeine Methode, um das zu tun, was Sie verlangen.

Ich habe eine Lösung wie diese gefunden, bei der das Wort "Dunkel" auf einer kleineren Bildschirmbreite auf "D" gekürzt wird. Grundsätzlich machen Sie einfach die Schriftgröße des ursprünglichen Inhalts 0 und haben die verkürzte Form als Pseudoelement.

In diesem Beispiel erfolgt die Änderung stattdessen beim Schweben:

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>

Nach acht Jahren stand ich vor der gleichen Herausforderung, als ich versuchte, den Stylish zu verwenden Browser-Erweiterung etwas auf einer Website zu ändern (nicht auf meiner). Und dieses Mal habe ich es geschafft, indem ich den Quellcode mit "inspect element" betrachtet und den darauf basierenden CSS-Code erstellt habe.

So sah es vorher aus:

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

Dies ist das gleiche Stück HTML und CSS, mit dem ich den Stil geändert habe:

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>

Sie können den obigen Code ausführen und sehen, dass er funktioniert (in Chrome getestet).

_{Dies ist einfach das, was ich damals wollte, als ich diese Frage stellte.}

_{Ich habe eine Art Community-Blog / Myspace verwendet ähnliches Material verwendet und das einzige, was Sie beim Stylen Ihres Profils hatten, war der CSS-Editor. Deshalb wollte ich es basierend auf dem Stil auswählen.}

Ich habe die Antwort hier gefunden:

• Erweiterte CSS-Auswahl - Auswahl basierend auf dem Styling

• CSS-Selektor nach Inline-Stilattribut

Um dies zu erreichen, müssen Sie dem CSS-Inhalt eine Zeilenhöhe hinzufügen. Dadurch wird der Block über dem ausgeblendeten angezeigt, sodass der geänderte Text nicht ausgeblendet wird.

Beispiel mit Verwendung vor :

.pvw-title span {
  display: none;
}

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

Nun, wie viele sagten, ist dies ein Hack. Ich möchte jedoch einen aktuelleren Hack hinzufügen, der den Vorteil von flexboxund nutzt rem, dh

• Sie möchten diesen zu ändernden Text nicht manuell positionieren, deshalb möchten Sie einen Vorteil daraus ziehen flexbox
• Sie möchten paddingund / oder marginden Text nicht explizit verwenden px, was für unterschiedliche Bildschirmgrößen auf unterschiedlichen Geräten und Browsern möglicherweise unterschiedliche Ausgaben ergibt

Hier ist die Lösung, kurz gesagt, flexboxstellt sicher, dass es automatisch perfekt positioniert ist undrem eine standardisiertere (und automatisiertere) Alternative für Pixel darstellt.

CodeSandbox mit Code unten und Ausgabe in Form eines Screenshots, bitte lesen Sie einen noteunter dem Code!

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

Hinweis: Für verschiedene Tags, für die Sie möglicherweise unterschiedliche Werte benötigen rem, ist dieser Wert h1nur für große Bildschirme gerechtfertigt . Mit können @mediaSie dies jedoch problemlos auf mobile Geräte ausweiten.