Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)

(original source from Stackoverflow, answer written by Blazemonger )

My situation:
I’ve a CSS file and I need to dynamically change the values of .is-selected:after and .is-selected:before from Javascript based on the user selection.

Here is my code

.is-selected {
    position: relative;
}
.is-selected:after, .topUp .is-selected:before {
    top: 85px;
    left: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.is-selected:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #9C2AA0;
    border-width: 31px;

    width: 1px;
    overflow: hidden;
}
.is-selected:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #ffffff;
    border-width: 38px;
    margin-left: -6px;
}

After few tries I’ve realised I can’t manipulate them because it’s not technically part of the DOM and therefore is inaccessible by any JavaScript.
However, I’ve found and here reported from an answer in Stackoverflow, written by Blazemonger, few alternatives to do it.
Continue reading