Wie kann ich mithilfe von CSS oder JavaScript benutzerdefinierten Text vor Elementen einfügen?

Textinjektionen mit CSS erstellen

Beim Übergang von grundlegendem CSS zu fortgeschritteneren Techniken ist es selbstverständlich, nach Möglichkeiten zu suchen, die Textpräsentation zu verbessern. Eine solche Herausforderung besteht darin, benutzerdefinierten Text vor bestimmten Elementen basierend auf ihren Klassennamen einzufügen.

Einfügen von Text mit CSS

In Ihrer Frage möchten Sie „Joes Aufgabe“ anzeigen: " vor Textelementen mit der Klasse „OwnerJoe.“ Traditionell könnten Sie den Text in das Element selbst einfügen:

<span class="OwnerJoe">Joe's Task: reconcile all entries</span>

Diese Methode wird jedoch überflüssig, wenn Sie sowohl die Klasse als auch den Textinhalt angeben.

Um Ihren Wunsch zu erfüllen, bietet CSS an eine Lösung:

.OwnerJoe:before {
  content: "Joe's Task: ";
}

Diese Regel weist den Browser an, den angegebenen Text („Joe's Task:“) vor jedem Element mit dem einzufügen Klasse „OwnerJoe“. Beachten Sie, dass hierfür ein CSS2-kompatibler Browser erforderlich ist.

Alternativer Ansatz: JavaScript

Während CSS diese Aufgabe bewältigen kann, bietet JavaScript einen einfacheren Ansatz, insbesondere wenn Sie dies bevorzugen dynamische Textinjektionen. Mit jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS oder JavaScript benutzerdefinierten Text vor Elementen einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!