how to animate text underline to more than one lines

Our goal is to animate text underline to multiple lines. The reason for doing this is that it looks cool and kinda futuristic to me at least, yeah and there are more ways to do that from which I chose this to be easiest so I will try animating with hover and applying a transition, the copiable code will be given at the end of the blog.

The reason why I am writing on this topic is that I wanted to do the same but after watching a lot of videos(incomplete) and reading blogs (incomplete) I came to know that all the content was for a single line animation but eventually I wanted more than that, then I found this solution from the youtube and after applying some more properties I was able to get this output which was pretty satisfying by the way and it came to be very easy.

after giving it some time I was able to get the desired output which is given below.

now let’s get to the explanation part firstly I have used CSS to put it in a center and increased the font size as well as gave some padding and margin, here I have used <a> tag which is already inline but if you want this animation in any tag you just need to make display property of that tag to inline it so you will get this output.

I have used a background image to which I have given color as given in the code below to appear in the transition, first, it will have a width of 0 and a height of 2 to 3 pixels and with a transition time of 500ms(milliseconds), it will fill its background by making its width 100%. the reason that we are able to underline all the lines is that the display property of the element is inline so every line gets an even amount of space and does not hold more space than it needs that’s what the inline elements do, right. the position of the background image is defined to be in the bottom left so it will start from the bottom of each line one by one and end while the line ends.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>underline</title>

    <style>

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }

      body {

        background-color: #fff;

      }

      .container {

        display: flex;

        height: 100vh;

        justify-content: center;

        align-items: center;

      }

      .box {

        width: 35%;

        object-position: center;

        border-radius: 50px;

      }

      .text {

        color: black;

        padding: 20px;

      }


      .text p {

        margin-top: 12px;

      }


      a {

        font-size: 24px;

        font-weight: 400;

        display: inline;

        text-align: center;

        padding-bottom: 4px;

        line-height: 29px;

        background-image: linear-gradient(90deg, red, blue);

        /* for white under line apply below code */

        /* background-image: linear-gradient(white,white); */

        background-size: 0% 3px;

        background-repeat: no-repeat;

        transition: background-size 400ms;

        background-position: left bottom;

        cursor: pointer;

      }

      a:hover {

        background-size: 100% 3px;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="box">

        <div class="text">

          <a

            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum

            illo corporis ea quo error asperiores quia repellendus! Incidunt,

            hic veniam soluta, reprehenderit ducimus repellat laborum facilis

            odio, vitae nisi cum!</a

          >

          <p>

            so now you know how to animate underline in text using css i hope

            you learnt something from it

          </p>

        </div>

      </div>

    </div>

  </body>

</html>

1 thought on “how to animate text underline to more than one lines”

Leave a Comment

Your email address will not be published.

Scroll to Top