JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenu">
    <a href="#">Bonjour</a>
</div>

CSS

body {
   
   font-family: 'Avenir Next', 'Helvetica', 'Arial';
    font-size: 42px;
   line-height: 48px;
    -webkit-font-smoothing: antialiased;
      background-color: #ffffff;
   }
   
   
   .contenu {
      position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;
       text-align: center;
       width: 100%;
       height: 200px;
   }
   
   
   a {
       display: inline;
       position: relative;
       color: #E46161;
       text-decoration: none;
   }
   
   a::after {
       content: '';
       display: block;
       position: absolute;
       bottom: 2px;
       width: 0%;
       left: 50%;
       height: 6px;
       transition: 1s;
       background: #E46161;
   }
   
   
     a:hover::after {
       width: 95%;
       left: 2.5%;
     }