div - remove after css jquery

Acceda al selector css ": after" con jQuery

Question

Esta pregunta ya tiene una respuesta aquí:

• Seleccionar y manipular pseudo-elementos CSS como :: before y :: after using jQuery 19 respuestas

Tengo el siguiente css:

.pageMenu .active::after {
    content: '''';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

Me gustaría cambiar el ancho del borde de los bordes superior, izquierdo e inferior con jQuery. ¿Qué selector usar para acceder a este elemento? Intenté lo siguiente, pero parece que no funciona.

$(''.pageMenu .active:after'').css(
        {
            ''border-top-width'': ''22px'',
            ''border-left-width'': ''22px'',
            ''border-right-width'': ''22px''
        }
    )

Answer 1

No se puede manipular :after , porque técnicamente no es parte del DOM y, por lo tanto, no es accesible por ningún JavaScript. Pero puede agregar una nueva clase con una nueva :after especificado.

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$(''.pageMenu .active'').toggleClass(''changed'');

ACTUALIZAR: si bien es imposible modificar directamente el :after contenido, hay formas de leer y / o anularlo mediante JavaScript. Consulte "Manipulación de pseudo-elementos CSS utilizando jQuery (por ejemplo, antes y después)" para obtener una lista completa de técnicas.

Answer 2

Puede agregar estilo para : después de un código html similar.
Por ejemplo:

var value = 22;
body.append(''<style>.wrapper:after{border-top-width: '' + value + ''px;}</style>'');

Answer 3

Si usa jQuery incorporado after() con un valor vacío, creará un objeto dinámico que coincidirá con su :after selector de CSS.

$(''.active'').after().click(function () {
    alert(''clickable!'');
});

Ver la documentación jQuery .