How to make a floating navigation bar, the lower border has a progress bar transition effect

  css3, question
<!  DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div{
 margin: 100px auto;
 width: 100px;
 height: auto;
 border-left: 2px solid aqua;
 border-left-width: 1px;
 transition: all 6s;
 -webkit-transition:all 6s;
 }
 
 div:hover{
 border-bottom-width: 100px;
 border-bottom-color: aqua;
 }
 </style>
 </head>
 <body>
 <div>hello world!  </div>
 </body>
 </html>

I made one, but I couldn’t. The effect of suspending the div’s lower border and extending from left to right. And does not exceed the width of div. Ask the great god for help.

<!  DOCTYPE html>
 <html lang="en">
 
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 margin: 100px auto;
 width: 100px;
 height: auto;
 border-left: 2px solid aqua;
 border-left-width: 1px;
 position: relative;
 }
 
 .ani {
 position: absolute;
 border-bottom: 1px solid aqua;
 left: 0;
 bottom: 0;
 width: 0px;
 transition: all 3s;
 -webkit-transition: all 3s;
 }
 
 div:hover .ani{
 width: 100px;
 }
 </style>
 </head>
 
 <body>
 <div>
 hello world!
 <em class="ani"></em>
 </div>
 </body>
 
 </html>

You can also use pseudo classes according to @Baran