如何使用 CSS 在鼠标移动时水平拆分文本？

鼠标移动时拆分文本也称为“拆分”效果或“中断”效果。这种效果过去在网页设计中非常流行，但现在随着新的网页设计模式的出现，它开始失去地位。

方法：方法是使用前后选择器将文本分成两部分。然后我们将使用悬停选择器使效果仅在鼠标悬停时可见。现在，让我们看看上述方法的实现。

HTML 代码： HTML 代码用于创建正文的结构。在以下代码中，

元素用于在屏幕上写入文本。

  

    
    
  
    

  

    

        GeeksforGeeks
    

  

CSS 代码：

• 第 1 步：首先，我们将文本居中对齐，并为其提供字体大小和基本样式。
• 第 2 步：我们使用 before 选择器使文本的上半部分为白色。
• 第 3 步：然后使用 after 选择器覆盖我们使用 before 选择器创建的白色区域，以便我们稍后可以使用悬停来发现它。
• 第 4 步：现在使用悬停来揭示鼠标悬停的效果。

提示：您可以使用不同的 z-index 值来确保顺序保持不变，并且代码中使用的边距值可以根据文本的 font-size 进行调整。确保对悬停中使用的边框底部和顶部应用相同的值，以确保白色覆盖区域在鼠标悬停时不可见。

完整代码：是以上两部分的组合，在鼠标移动时水平拆分文本。

  

    
    
  
    
  
    

  

    

        GeeksforGeeks
    

  

输出：