Comment puis-je injecter du texte personnalisé avant les éléments à l'aide de CSS ou de JavaScript ?

Création d'injections de texte avec CSS

Lors de la transition du CSS de base vers des techniques plus avancées, il est naturel de chercher des moyens d'améliorer la présentation du texte. L'un de ces défis consiste à injecter du texte personnalisé avant des éléments spécifiques en fonction de leurs noms de classe.

Insérer du texte à l'aide de CSS

Dans votre question, vous souhaitez afficher « la tâche de Joe : " avant les éléments de texte avec la classe "OwnerJoe". Traditionnellement, vous pouvez inclure le texte dans l'élément lui-même :

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

Cependant, cette méthode devient redondante lors de la spécification à la fois de la classe et du contenu du texte.

Pour répondre à votre souhait, CSS propose une solution :

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

Cette règle demande au navigateur d'injecter le texte spécifié ("Joe's Task:") avant tout élément avec le Classe "PropriétaireJoe". Notez que cela nécessite un navigateur compatible CSS2.

Approche alternative : JavaScript

Bien que CSS puisse gérer cette tâche, JavaScript offre une approche plus simple, surtout si vous préférez injections de texte dynamiques. Utilisation de jQuery :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!