Comment puis-je sélectionner et manipuler des pseudo-éléments CSS (::before, ::after) avec JavaScript/jQuery ?

Sélection et manipulation de pseudo-éléments CSS avec JavaScript/jQuery

Pour sélectionner et manipuler des pseudo-éléments CSS comme ::avant et ::après en utilisant JavaScript ou jQuery, vous pouvez utiliser plusieurs techniques différentes.

Manipulation du contenu à l'aide jQuery

jQuery permet de récupérer et de manipuler le contenu de pseudo-éléments comme ceci :

// Get the content of ::after for an element with class "span"
var content = $('.span::after').text();

Pour modifier le contenu, attribuez simplement une nouvelle valeur :

// Change the content of ::after for elements with class "span"
$('.span::after').text('bar');

Manipulation du contenu avec des attributs de données

Vous pouvez également transmettre le contenu aux pseudo-éléments à l'aide des attributs de données et de jQuery :

<!-- Element with a data attribute -->
<span data-content="foo">foo</span>

// Get the content from the data attribute
var content = $('span').attr('data-content');

// Manipulate the pseudo-element content
$('.span::after').text(content);

Pour modifier le contenu au survol, vous pouvez combiner cette approche avec des gestionnaires d'événements :

$('span').hover(function() {
  // Change the content of ::after on hover
  $(this).attr('data-content', 'bar');
});

span::after {
  content: attr(data-content) /* Combine this with seucolega's solution */ ' any other text you may want';
}

En utilisant ces techniques, vous pouvez contrôler dynamiquement le contenu et l'apparence des pseudo-éléments dans vos applications web.

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!