Как обратиться к объекту :after элемента Jquery?

Question

[RobinB]

.event-open{
position: absolute;
-moz-transform: scale(.41) rotate(-23deg);
-webkit-transform: scale(.41) rotate(-23deg);
-o-transform: scale(.41) rotate(-23deg);
-ms-transform: scale(.41) rotate(-23deg);
transform: scale(.41) rotate(-23deg);
left: -6px;
top:-34px;
transition: 1s;
&:before{
content:"";
display: block;
position: absolute;
@extend .icons-border-event;
opacity: 0;
transition: 1s;
z-index: -1;
top: -16px;
left: -16px;
}
&:after{
content: "";
display: block;
position: absolute;
right: 216px;
top: 146px;
opacity: 1;
@extend .icons-escape;
transition: 1s;
-moz-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
cursor: pointer;
}
}

$(".event-open::after").on("click",function() {
$(".event-open").toggleClass("event-open-on");
});

При обращении в консоли к $(".event-open::after") выдает [] - почему так?

Answer 1

[disillusion]

Нельзя манипулировать :after, потому что это не техническая часть DOM и поэтому он недоступен для JavaScript.
Вот есть несколько обходных путей.

Comments

[RobinB]

Спасибо

Answer 2

[A K]

Никак, создавайте новый элемент

Answer 3

[Игорь Васильев]

Например, так:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>