Simple Splitting Text in half using CSS

//HTML
  <title>Split Effect </title>
  
  //CSS
      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 #fff;
      z-index: 2;
      transition: all .2s ease-in;
    }

    h1:hover::after {
      border-bottom: 5px solid #fff;
      top: -5px;
    }