Why is this thing not working? If I remove ::before from javascript and css it works. But due to the design needs there has to be a ::before. How do I point to the class + ::before?

$(function () {



var sections = $("section");
var navigation_links = $("nav a");

sections.waypoint({
    handler: function (event, direction) {

        var active_section;
        active_section = $(this);
        if (direction === "up") active_section = active_section.prev();

        var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
        navigation_links.removeClass("selected::before");
        active_link.addClass("selected::before");

    },
    offset: '25%'
})

});

css:

.selected::before {
display: block;
content: "";
margin-top: 6px;
width: 8px;
height: 8px;
background: url(../img/sprite.png) -126px -196px;
background-size: 400px 480px;
float: left;
margin-left: 20px;
margin-right: 20px;

}