Skip to content
Related Articles

Related Articles

How to split text horizontally on mouse move over using CSS ?
  • Last Updated : 20 May, 2020

The splitting of text on mouse move over is also known as the “SPLIT” effect or “BREAK” effect. The effect was really popular in web design in the past but now with emerging of new web design patterns, it has started to lose its place.

Approach: The approach is to split text into two parts using before and after selectors. Then we will use hover selector to make effect visible only on mouse hover. Now, let’s look at the implementation of the above approach.

HTML Code: The HTML code is used to create the structure of the body. In the following code, an <h1> element is used to write the text on the screen.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Split Effect </title>
</head>
  
<body>
    <h1 data-title="GeeksforGeeks">
        GeeksforGeeks
    </h1>
</body>
  
</html>

CSS Code:

  • Step 1: First, we have aligned our text to center and provide it font-size and basic styling.
  • Step 2: We have used before selector to make the top half of the text to be of white color.
  • Step 3: Then use after selector to cover the white area that we have created using before selector so that we can uncover it later using hover.
  • Step 4: Now use hover to uncover the effect on mouse hover.

Tip: You can use different values of z-index to make sure that the order remains the same and the value of margins used in the code can be adjusted according to the font-size of the text. Make sure to apply the same values to the border-bottom and top used in hover to make sure that the white covered area won’t be visible on mouse hover.






<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
  
    h1 {
        top: 40%;
        left: 33%;
        position: absolute;
        font-size: 60px;
        z-index: -1;
    }
  
    h1::before {
        content: attr(data-title);
        position: absolute;
        height: 50%;
        overflow: hidden;
        color: whitesmoke;
        z-index: 1;
        top: 0;
        left: 0;
    }
  
    h1::after {
        content: attr(data-title);
        position: absolute;
        height: 53%;
        top: 0;
        left: 0;
        overflow: hidden;
        color: black;
        border-bottom: 0px solid red;
        z-index: 2;
        transition: .5s;
    }
  
    h1:hover::after {
        border-bottom: 5px solid red;
        top: -5px;
    }
</style>

Complete Code: It is the combination of the above two sections to split text horizontally on mouse move over.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Split Effect </title>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
  
        h1 {
            top: 40%;
            left: 33%;
            position: absolute;
            font-size: 60px;
            z-index: -1;
        }
  
        h1::before {
            content: attr(data-title);
            position: absolute;
            height: 50%;
            overflow: hidden;
            color: whitesmoke;
            z-index: 1;
            top: 0;
            left: 0;
        }
  
        h1::after {
            content: attr(data-title);
            position: absolute;
            height: 53%;
            top: 0;
            left: 0;
            overflow: hidden;
            color: black;
            border-bottom: 0px solid red;
            z-index: 2;
            transition: .5s;
        }
  
        h1:hover::after {
            border-bottom: 5px solid red;
            top: -5px;
        }
    </style>
</head>
  
<body>
    <h1 data-title="GeeksforGeeks">
        GeeksforGeeks
    </h1>
</body>
  
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :