Border Bottom Menu Left To Right HTML CSS

<div class="left-to-right">
       <h2>Left To Right</h2>
           <ul>
                   <li><a href="">Home</a></li>
                   <li><a href="">About</a></li>
                   <li><a href="">Services</a></li>
                   <li><a href="">Portfolio</a></li>
                   <li><a href="">Contact us</a></li>
               </ul>

   </div>

   <div class="right-to-left">
           <h2>Right To Left</h2>
               <ul>
                       <li><a href="">Home</a></li>
                       <li><a href="">About</a></li>
                       <li><a href="">Services</a></li>
                       <li><a href="">Portfolio</a></li>
                       <li><a href="">Contact us</a></li>
                   </ul>
   
       </div>

body { padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif;}
        h2 { text-align: center; color: #333 }
        .left-to-right ul { display: flex; padding: 0px; background: #F44336; justify-content: center; padding: 10px 0px;}
        .left-to-right ul li { list-style-type: none; padding: 10px 20px;}
        .left-to-right ul li a {text-decoration: none; text-transform: uppercase; font-size: 1.1em; font-weight: 500; color: #fff; display: block; position: relative;}
        .left-to-right ul li a:before { content: ''; width:0; height:3px; position: absolute; content: ''; background: #fff; top:120%; transition: 0.5s; left:0; } 
        .left-to-right ul li:hover a:before { width: 100%;  }

        .right-to-left ul { display: flex; padding: 0px; background: #607D8B; justify-content: center; padding: 10px 0px;}
        .right-to-left ul li { list-style-type: none; padding: 10px 20px;}
        .right-to-left ul li a {text-decoration: none; text-transform: uppercase; font-size: 1.1em; font-weight: 500; color: #fff; display: block; position: relative;}
        .right-to-left ul li a:before { content: ''; width:0; height:3px; position: absolute; content: ''; background: #fff; top:120%; transition: 0.5s; right:0; } 
        .right-to-left ul li:hover a:before { width: 100%;  }