CSS: Como remover pseudoelementos (depois, antes,…)?


236

Gostaria de usar uma opção para o layout das tags de parágrafo em uma página da web.

Eu uso o pseudoelemento after:

p:after {content: url("../img/paragraph.gif");}

Agora preciso remover esse código CSS da página.

Como isso pode ser feito facilmente?

Eu quero acrescentar que:

  • jQuery já está sendo usado na página

  • e não quero incluir ou remover arquivos que contêm CSS.


Respostas:


455
p:after {
   content: none;
}

nenhum é o valor oficial para definir o conteúdo, se especificado, para nada.

http://www.w3schools.com/cssref/pr_gen_content.asp


2
Isso realmente elimina outros estilos relacionados ao conteúdo, portanto, mesmo que você tenha preenchimentos e margens definidos, eles se tornam inertes?
Ryan Williams

Essa deve ser a resposta aceita. Usando conteúdo: ''; pode levar a resultados inesperados ao tentar substituir um atributo de conteúdo definido anteriormente.
Roy Milder 18/10

Você não pode simplesmente fazer display: none?
MDTech.us_MAN

@ MDTech.us_MAN sim, você pode fazer "display: none", mas ainda será mantido na árvore do DOM. Definir o conteúdo: nenhum nem sequer colocá-lo na árvore DOM (você pode verificá-lo através do Chrome DOM inspetor)
kumarharsh

29

Você precisa adicionar uma regra css que remove o conteúdo posterior ( por meio de uma classe ).


Uma atualização devido a alguns comentários válidos.

A maneira mais correta de remover / desativar completamente a :afterregra é usar

p.no-after:after{content:none;}

como Gillian Lo Wong respondeu .


Resposta original

Você precisa adicionar uma regra css que remove o conteúdo posterior ( por meio de uma classe ).

p.no-after:after{content:"";}

e adicione essa classe ao seu pquando quiser com esta linha

$('p').addClass('no-after'); // replace the p selector with what you need...

um exemplo de trabalho em: http://www.jsfiddle.net/G2czw/



9

Como mencionado na resposta de Gillian , atribuir nonea contentresolve o problema:

p::after {
   content: none;
}

Observe que no CSS3 , o W3C recomendou o uso de dois pontos ( ::) para pseudoelementos como antes ou depois .

No documento da Web MDN sobre pseudoelementos

Nota: Como regra, dois pontos ( ::) devem ser usados ​​em vez de um único ponto ( :). Isso distingue pseudo-classes de pseudo-elementos. No entanto, como essa distinção não estava presente nas versões mais antigas da especificação W3C, a maioria dos navegadores suporta as duas sintaxas por uma questão de compatibilidade. Observe que ::selectionsempre deve começar com dois pontos ( ::).


5

Isso depende do que realmente está sendo adicionado pelos pseudoseletores. Na sua situação, definir o conteúdo para ""se livrar dele, mas se você estiver definindo bordas ou planos de fundo ou o que for, precisará zerá-lo especificamente. Até onde eu sei, não há uma solução para remover tudo sobre um elemento antes / depois, independentemente do que seja.


0

teve o mesmo problema há alguns minutos e simplesmente content:none;não funcionou, mas adicionando content:none !important;edisplay:none !important; trabalhando para mim


-3
p:after {
  content: none;
}

Esta é uma maneira de remover o :aftere você pode fazer o mesmo para:before


1
Essa resposta parece reiterar a mesma solução que a atualmente aceita há vários anos. Se você acha que tem algo a acrescentar, deixe-o como um comentário na resposta original. Como alternativa, se você tiver uma solução diferente, explique por que ela é diferente (e possivelmente melhor).
MTCoster
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.