CSS: ¿Cómo eliminar pseudo elementos (después, antes, ...)?


236

Me gustaría usar un interruptor para el diseño de etiquetas de párrafo en una página web.

Yo uso el pseudoelemento posterior:

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

Ahora necesito eliminar este código CSS de la página.

¿Cómo se puede hacer esto fácilmente?

Quiero agregar eso:

  • jQuery ya se usa en la página

  • y no quiero incluir o eliminar archivos que contengan CSS.


Respuestas:


455
p:after {
   content: none;
}

none es el valor oficial para establecer el contenido, si se especifica, en nada.

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


2
¿Esto realmente aclara otros estilos relacionados con el contenido, por lo tanto, incluso si tiene rellenos y márgenes establecidos, se vuelven inertes?
Ryan Williams

Esta debería ser la respuesta aceptada. Usando contenido: ''; podría generar resultados inesperados al intentar anular un atributo de contenido establecido previamente.
Roy Milder

¿No puedes simplemente hacer display: none?
MDTech.us_MAN

@ MDTech.us_MAN sí, puede hacer "display: none", pero aún se mantendrá en el árbol DOM. Opciones de configuración: ninguno ni siquiera se puso en el árbol DOM (se puede comprobar a través de Chrome DOM Inspector)
kumarharsh

29

Debe agregar una regla CSS que elimine el contenido posterior (a través de una clase ).


Una actualización debido a algunos comentarios válidos.

La forma más correcta de eliminar / deshabilitar completamente la :afterregla es usar

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

como respondió Gillian Lo Wong .


Respuesta original

Debe agregar una regla CSS que elimine el contenido posterior (a través de una clase ).

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

y agrega esa clase a tu pcuando quieras con esta línea

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

Un ejemplo de trabajo en: http://www.jsfiddle.net/G2czw/



9

Como se menciona en la respuesta de Gillian , asignar nonea contentresuelve el problema:

p::after {
   content: none;
}

Tenga en cuenta que en CSS3 , W3C recomendó usar dos puntos ( ::) para pseudoelementos como ::beforeo ::after.

Desde el documento web de MDN sobre pseudoelementos :

Nota: Como regla general, se ::deben usar dos puntos ( ) en lugar de dos puntos ( :). Esto distingue pseudo-clases de pseudo-elementos. Sin embargo, dado que esta distinción no estaba presente en versiones anteriores de la especificación W3C, la mayoría de los navegadores admiten ambas sintaxis en aras de la compatibilidad. Tenga en cuenta que ::selectionsiempre debe comenzar con dos puntos dobles ( ::).


5

Esto depende de lo que realmente agreguen los pseudoelectores. En su situación, configurar el contenido ""lo eliminará, pero si está configurando bordes o fondos o lo que sea, debe ponerlos a cero específicamente. Hasta donde yo sé, no hay una cura para eliminar todo sobre un elemento antes / después, independientemente de lo que sea.


0

Tuve el mismo problema hace unos minutos y simplemente content:none;no funcionó, pero agregó content:none !important;y display:none !important;funcionó para mí


-3
p:after {
  content: none;
}

Esta es una forma de eliminar el :aftery puede hacer lo mismo para:before


1
Esta respuesta parece reiterar la misma solución que la actualmente aceptada de hace varios años. Si cree que tiene algo que agregar, déjelo como comentario en la respuesta original. Alternativamente, si tiene una solución diferente, explique por qué es diferente (y posiblemente mejor).
MTCoster
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.