Maison >interface Web >tutoriel CSS >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!