如何使用JavaScript / jQuery选择和操作CSS伪元素

在本文中，我们将学习如何使用JavaScript（或jQuery）选择和操作CSS伪元素。CSS伪元素允许开发人员使用类似::before和::after的选择器来样式化和增强HTML文档的特定部分，提供了添加装饰性内容、修改布局和创建独特视觉效果的灵活性。在这里，我们使用JavaScript或jQuery方法来操作CSS伪元素。

CSS伪元素是添加到选择器的关键字，可以让您为所选元素的特定部分指定样式。例如，为元素的首字母或首行设置样式。

方法1：使用JavaScript

选择和操作CSS伪元素的第一种方法是使用JavaScript。在这种方法中，我们将使用CSS的::after伪元素来操作其样式等。

示例： 下面的示例演示了使用JavaScript选择和操作::after伪元素。

JavaScript代码中，我们给.myclass元素添加了一个事件监听器。当鼠标悬停在元素上时，data-content属性会被更新为“这是悬停后的内容”。当鼠标移出元素时，data-content属性会重置为“这是后面的内容”。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .myclass::after { 
            content: attr(data-content); 
            color: green; 
            font-size: 30px 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        How to select and manipulate CSS 
        pseudo-elements in JavaScript 
    </h2> 
      
    <div class="myclass" data-content="This is After"></div> 
      
    <script> 
        document.addEventListener("DOMContentLoaded", 
            function () { 
                let myclass = document.querySelector('.myclass'); 
  
                myclass.addEventListener("mouseover", 
                    function () { 
                        myclass.setAttribute('data-content', 
                            'This is Hovered After'); 
                    }); 
  
                myclass.addEventListener("mouseout", 
                    function () { 
                        myclass.setAttribute('data-content', 
                            'This is After'); 
                    }); 
            }); 
    </script> 
</body> 
  
</html>

输出:

如何使用JavaScript / jQuery选择和操作CSS伪元素

方法2：使用jQuery

选择和操作CSS伪元素的第二种方法是使用jQuery。在这里，我们将使用attr()函数，该函数允许您检索属性的值并将其用作CSS属性的值。

示例： 下面的示例演示了使用jQuery的after伪元素、attr()和hover()方法的选择和操作。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .myclass::after { 
            content: attr(data-content); 
            color: green; 
        } 
    </style> 
    
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2>How to select and manipulate CSS 
        pseudo-elements jQuery 
    </h2> 
    <div class="myclass" 
         data-content="This is After"> 
      </div> 
    <script> 
        (document).ready(function () { 
            ('.myclass').hover( 
                function () { 
                    (this).attr('data-content',  
                                 'This is Hovered After'); 
                }, 
                function () { 
                    (this).attr('data-content', ''); 
                } 
            ); 
        }); 
    </script> 
</body> 
  
</html>