Change content of ::after

Question

I have the following structure:

<div class=duvidas>
   <div>
       <span>Titulo</span>
       <div style='display: none'>Texto</div>
   </div>
</div>

The goal is click on in a span and alter the content of span of '+' for '-'

And make the display of div of none for block.

$('div.duvidas > div').click(function(){
    if ($(this).find ('span').css('display') == 'none') {
      $(this).find ('span::after').attr('data-content','-');
      $(this).find ('div').css('display', 'block');    
    } else {
      $(this).find ('span::after').attr('data-content','+');
      $(this).find ('div').css('display', 'none');    
    }
  })

But it’s not working.

Answer 1

Pseudo-elements are not accessible via Javascript (see the duplicate). What you can do to change them is by adding a class that changes the ::after in CSS. Now there are problems in your Javascript, where you should check in if if div is visible, not span.

Note in the CSS below that when div has the class .ativo, the content of ::after is amended.

Behold:

$('div.duvidas > div').click(function(){
   if (!$(this).find('div').is(':visible')){ // verifica se a div está visível
      $(this)
      .find('span') // busca o span
      .addClass('ativo') // adiciona a classe
      .end() // volta pro $(this)
      .find('div') // busca a div
      .show(); // mostra a div
   } else {
      $(this)
      .find('span')
      .removeClass('ativo')
      .end()
      .find('div')
      .hide();
   }
})

span::after{
   content: '+';
}

span.ativo::after{
   content: '-';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=duvidas>
   <div>
       <span>Titulo</span>
       <div style='display: none'>Texto</div>
   </div>
</div>