How to find the position of :before element using Javascript?

Question

I have this animation taking place in which i need to change the color of the element in the centre when the small circle touches it, i thought i could find it using position() but since i am using a :before for animating the div the position values are not useful, Is there a way i could achieve this or any other way to find out when the small circle intersects the large one.

https://jsfiddle.net/pwqfh7ys/5/

html

<figure class="glob-wrapper">
    <div class="goos">
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <object type="image/svg+xml" data="./img/hello.svg" class="hello"></object>
    </div>
    <div class="blobs">
        <div class="blob"></div>
    </div>
</figure>

css

Answer 1

You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.

hope the below snippet might help, you can specify the content value you want via JS using the CSS attr() function.

Javascript

$('.blob').on('click', function () {
    //do something with the callback
    $(this).attr('data-before','anything'); //anything is the 'content' value
});

CSS:

.blob:before {
    content: attr(data-before); //value that that refers to CSS 'content'
    //css here
}