JavaScript/jQuery를 사용하여 CSS 의사 요소(::before, ::after)를 선택하고 조작하려면 어떻게 해야 합니까?

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

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

<!-- 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);

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