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');
});
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');
});