1

Como, via JavaScript ou jQuery, consigo remover ou altera para none o valor de um atributo content do css abaixo:

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

Tentei de várias formas, sem sucesso:

    <script>
        $(document).ready(function () {
            // $('.container').removeProp('content');

            // $('.container').remove();

            // $('.container').removeAttr('style');   

            // $(".container:after").prop("style").removeProperty("content");
            // $(".container").removeProperty('content');

            $(".container").css('content', 'none');
        });
    </script>
1
  • 1
    você não consegue alterar pseudo elementos via js/jquery, o que você pode fazer é adicionar uma classe e trocar o content do elemento quando a classe existir.
    – haykou
    5/01/2018 às 19:56

3 Respostas 3

1

Como :after não é um objeto, você não vai conseguir modificar o conteúdo dele diretamente. O que você pode fazer é injetar CSS na página.

Exemplo:

document.querySelector("button").addEventListener("click", function(){
  document.styleSheets[0].addRule('#texto:after', 'content: ""');
})
#texto:after {content: "Text here"}
<div id="texto">O texto é: </div>

<button type="button">Alterar texto</button>

1

Você pode alterar o :after e :before adicionando uma nova class ao elemento com novos :after e :before. Alterando apenas o content na nova class, os outros estilos originais do :after/:before não são afetados.

Para adicionar a nova class, pode-se usar .toggleClass. Coloquei no exemplo abaixo um temporizador para ilustrar a mudança após 3 segundos:

$(document).ready(function () {
   tempo = setInterval(function(){
      clearInterval(tempo);
      $("#teste").html("O elemento possui novo before e after!");

      $(".container").toggleClass("n_container");   

   }, 3000);
});
.btn-group-vertical>.btn-group:after,
.btn-group-vertical>.btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
   display: table;
   content: "after e before original";
   color: red;
}

/* novas class after e before */
.n_container:after,
.n_container:before{
   content: "none";
   color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   conteúdo da div
</div>
<div id="teste">Aguarde 3 segundos...</div>

0

Tenta a sim!

$(".container").css("content", "none");

De uma olhada nesse link : https://stackoverflow.com/questions/5394951/adding-and-removing-style-attribute-from-div-with-jquery

1
  • essa abordagem já foi utilizada, sem sucesso, pelo autor da pergunta 5/01/2018 às 20:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .