无法使伪元素跟随鼠标移动

伪元素无法跟随鼠标移动的问题通常涉及到CSS的定位和JavaScript的事件处理。以下是解决这个问题的基础概念和相关步骤：

基础概念

伪元素：CSS伪元素用于选择并样式化元素的特定部分，如内容前后的部分或第一行文字等。
定位：CSS中的position属性用于指定元素在页面上的定位方式，包括static、relative、absolute、fixed等。
事件监听：JavaScript中的事件监听允许在特定事件发生时执行代码，如鼠标移动事件。

解决步骤

设置伪元素的定位：伪元素默认是静态定位，需要将其设置为绝对定位以便能够自由移动。
设置伪元素的定位：伪元素默认是静态定位，需要将其设置为绝对定位以便能够自由移动。
使用JavaScript监听鼠标移动事件：通过JavaScript监听鼠标的移动，并更新伪元素的位置。
使用JavaScript监听鼠标移动事件：通过JavaScript监听鼠标的移动，并更新伪元素的位置。
应用动态位置到伪元素：在CSS中使用自定义属性来设置伪元素的位置。
应用动态位置到伪元素：在CSS中使用自定义属性来设置伪元素的位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .element {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    .element::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        /* 初始位置 */
        left: var(--x, 0);
        top: var(--y, 0);
    }
</style>
</head>
<body>
<div class="element"></div>
<script>
    document.addEventListener('mousemove', function(event) {
        const element = document.querySelector('.element');
        element.style.setProperty('--x', event.clientX + 'px');
        element.style.setProperty('--y', event.clientY + 'px');
    });
</script>
</body>
</html>