How to change Pseudo values with JavaScript

Question

I want to do custom cursor with before and after elements. How can I select and change values before and after elements with JavaScript?

        .a-Cursor::before {
            content: ''; display: block;
            width: 18px; height: 18px;
            border: 2px solid #353B48;
            border-radius: 50%; position: absolute;
            top: attr(top-Pos); left: attr(left-Pos);
        }
    </style>
</head>
<body>
    <div class='page-Body'>
        <div class='a-Cursor'>
            
        </div>
    </div>

    <script>
        const aCursor = document.querySelector('.a-Cursor');

        document.addEventListener('mousemove', function(e) {
            aCursor.setAttribute('top-Pos', (e.pageY - 9) + 'px');
            aCursor.setAttribute('left-Pos', (e.pageX - 9) + 'px');
        });

Has already been answered here https://stackoverflow.com/questions/38872290/how-to-get-pseudo-element — GoldenretriverYT, Mar 24 '22 at 14:04

score 0 · Answer 1 · answered Mar 24 '22 at 14:13

I found an answer. I do not know this is good or bad.

I will be here for better solutions.

.a-Cursor::before {
            content: ''; display: block;
            width: 18px; height: 18px;
            border: 2px solid #353B48;
            border-radius: 50%; position: absolute;
            top: var(--top-Pos); left: var(--left-Pos);
        }
    </style>
</head>
<body>
    <div class='page-Body'>
        <div class='a-Cursor'>
            
        </div>
    </div>

    <script>
        const aCursor = document.querySelector('.a-Cursor');

        document.addEventListener('mousemove', function(e) {
            aCursor.style.setProperty('--top-Pos', (e.pageY - 9) + 'px');
            aCursor.style.setProperty('--left-Pos', (e.pageX - 9) + 'px');
        });

How to change Pseudo values with JavaScript

1 Answers1