Wie kann ich CSS-Pseudoelemente (::before, ::after) mit JavaScript/jQuery auswählen und bearbeiten?

Auswählen und Bearbeiten von CSS-Pseudoelementen mit JavaScript/jQuery

Um CSS-Pseudoelemente wie ::before und ::after mit JavaScript oder jQuery auszuwählen und zu bearbeiten, Sie können verschiedene Techniken anwenden.

Manipulieren von Inhalten mithilfe von jQuery

jQuery ermöglicht es Ihnen, den Inhalt von Pseudoelementen wie folgt abzurufen und zu bearbeiten:

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

Um den Inhalt zu ändern, weisen Sie einfach einen neuen Wert zu:

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

Manipulation von Inhalten mit Datenattributen

Alternativ können Sie Inhalte an übergeben Pseudoelemente mithilfe von Datenattributen und 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);

Um den Inhalt beim Schweben zu ändern, können Sie diesen Ansatz mit Ereignishandlern kombinieren:

$('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';
}

By Mithilfe dieser Techniken können Sie den Inhalt und das Erscheinungsbild von Pseudoelementen in Ihren Webanwendungen dynamisch steuern.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Pseudoelemente (::before, ::after) mit JavaScript/jQuery auswählen und bearbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!