CSS peut-il insérer du texte dynamiquement avant un élément en utilisant uniquement sa classe ?

Insérer du texte avec CSS : un guide

En tant que débutant en CSS, manipuler le formatage et le style du texte est un concept familier. Cependant, vous êtes parfois confronté à des défis tels que l'insertion dynamique de texte à l'aide de CSS. Considérez ce scénario :

Vous souhaitez insérer le texte « Joe's Task : » avant l'élément avec la classe « OwnerJoe ». Idéalement, vous préféreriez y parvenir en utilisant uniquement la classe de l'élément, sans définir explicitement le texte dans l'élément.

Exploration des options

Au départ, vous pouvez recourir à incluant directement le texte dans l'élément :

<span>

Cependant, cette approche semble redondante car vous spécifiez explicitement à la fois la classe et l'élément associé. text.

Exploiter :before

CSS2 introduit la pseudo-classe :before, qui vous permet d'insérer du contenu avant un élément. En utilisant cela, vous pouvez atteindre votre objectif comme suit :

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

En appliquant cette règle, chaque fois qu'un élément avec la classe "OwnerJoe" est rencontré, le texte "Joe's Task: " s'affiche devant lui.

Alternative : JavaScript

Alternativement, vous pouvez utiliser JavaScript pour cette tâche. En utilisant jQuery, vous pouvez implémenter le code suivant :

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

Ce code parcourt tous les éléments avec la classe "OwnerJoe" et insère le texte "Joe's Task:" à l'aide de JavaScript.

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!