Wie kann ich Text durch CSS ersetzen?

Question

Wie kann ich mit einer solchen Methode Text 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 die [ ] um es zum Laufen zu bringen.

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

Ich muss " ersetzen Fakten ".

Answer 1

Oder vielleicht könnten Sie "Fakten" um ein <span> wie folgt:

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

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

Answer 2

Obligatorisch : Dies ist ein Hack: CSS ist nicht der richtige Ort dafür, aber in manchen Situationen - z. B. wenn Sie eine Bibliothek eines Drittanbieters in einem Iframe haben, die nur per CSS angepasst werden kann - ist diese Art von Hack die einzige Möglichkeit.

Sie können Text durch CSS ersetzen. Ersetzen wir eine grüne Schaltfläche mit dem Wort "Hallo" durch eine rote Schaltfläche mit dem Wort "Auf Wiedersehen". mit CSS.

Vorher:

Danach:

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

Nun blenden wir das ursprüngliche Element aus, fügen aber anschließend ein weiteres Blockelement hinzu:

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

Anmerkung:

• Wir müssen dies explizit als Blockelement kennzeichnen, 'after'-Elemente sind standardmäßig inline
• Wir müssen das ursprüngliche Element ausgleichen, indem wir die Position des Pseudo-Elements anpassen.
• Wir müssen das ursprüngliche Element ausblenden und das Pseudoelement anzeigen, indem wir visibility . Hinweis display: none auf das ursprüngliche Element funktioniert nicht.

Answer 3

Wenn Sie bereit sind, Pseudoelemente zu verwenden und sie Inhalte einfügen zu lassen, können Sie Folgendes tun. Dabei wird keine Kenntnis des ursprünglichen Elements vorausgesetzt und es ist kein zusätzliches Markup erforderlich.

.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

Answer 4

Basierend auf mikemaccana's Antwort , Das hat bei mir funktioniert

button {
  position: absolute;
  visibility: hidden;
}

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

<button>original</button>

§ Absolute Positionierung

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

Answer 5

Das ist einfach, kurz und effektiv. Es ist kein zusätzliches HTML 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 einen anderen Linktext als "Home" zu ersetzen, und zwar für WooCommerce Semmelbrösel

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