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

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

Es verhält sich immer noch wie ein Kontrollkästchen, was die Rückgabe (oder Nicht-Rückgabe) eines POST-Wertes angeht, aber von der Anzeige her sieht es wie eine Umschalttaste aus.

Die Farben mögen nicht nach Ihrem Geschmack sein, sie dienen nur zur Veranschaulichung.

Der HTML-Code lautet:

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

...und der 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 auch anderswo funktionieren.

Answer 2

Durch die Verwendung eines Pseudo-Elements setzt diese Methode keine Kenntnis des ursprünglichen Elements voraus und erfordert 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;
}

Answer 3

Ich habe eine solche Lösung gefunden, bei der das Wort "Dark" auf einer kleineren Bildschirmbreite einfach zu "D" verkürzt wird. Im Grunde machen Sie einfach die Schriftgröße des ursprünglichen Inhalts 0 und haben die verkürzte Form als Pseudo-Element.

In diesem Beispiel erfolgt die Änderung stattdessen beim Hovern:

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>

Answer 4

Im Gegensatz zu jeder anderen Antwort, die ich sehe, haben Sie brauchen nicht Pseudoelemente zu 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");
    }

Answer 5

Nach acht Jahren stand ich vor der gleichen Herausforderung, als ich versuchte, die Stilvoll Browsererweiterung, um etwas auf einer Website (nicht meiner) zu ändern. Und dieses Mal habe ich es geschafft, indem ich mir den Quellcode mit "Element inspizieren" angesehen und den CSS-Code auf dieser Grundlage 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 derselbe Teil des HTML und des CSS, den ich verwendet habe, um den Stil zu ändern:

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 Sie werden sehen, dass er funktioniert (getestet in Chrome).

---

_{Das ist genau das, was ich damals wollte, als ich diese Frage stellte.}

_{Ich habe eine Art von Community-Blog benutzt/ <a href="https://en.wikipedia.org/wiki/Myspace" rel="nofollow noreferrer">Myspace </a>und das Einzige, was man für die Gestaltung seines Profils zur Verfügung hatte, war der CSS-Editor, und deshalb wollte ich es nach dem Stil auswählen.}

Ich habe die Antwort hier gefunden:

• Erweiterter CSS-Selektor - Auswahl auf Basis von Styling

• CSS-Selektor nach Inline-Style-Attribut