hover.css

 body {
        padding: 0;
        margin: 0;
      }

      body {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: system;
        font-size: 50px;
        background: #ffffff;
      }

      div {
        padding: 50px;
      }

      .gradient-underline {
        text-decoration: none;
        color: black;
        background-image: linear-gradient(90deg, blue, purple, #f3bc26);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
        transition: background-size 300ms;
        font-size: 15px;
      }
      .gradient-underline:hover {
        background-size: 100% 2px;
      }