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

Ich hatte mehr Glück bei der Einstellung der font-size: 0 des äußeren Elements, und die font-size der :after Selektor auf den gewünschten Wert.

Answer 2

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

Jetzt gibt es eine Reihe von Möglichkeiten, zwischen ihnen zu wechseln. Ich habe sie in Kombination mit Media-Queries für einen responsiven Design-Ansatz verwendet, um die Namen meiner Navigation in Icons zu ändern.

jsfiddle Demonstration und Beispiele

_{<em>Es mag die Frage nicht perfekt beantworten, aber es erfüllt meine Bedürfnisse und vielleicht auch die anderer.</em>}

Answer 3

Textersetzung mit Pseudo-Elementen 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.";
}

Answer 4

Das hat bei mir mit Inline-Text funktioniert. Ich habe es 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;
}

Answer 5

Ich wende diesen Trick an:

.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 zu handhaben, indem ich einfach eine Basisklasse änderte...

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