How to split text horizontally on mouse move over using CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.