title: How to implement transition effect for displaying underline on hovering a react router Link?
body: <p>I am using react-router-dom node package in my react project to implement routing.</p>
  
  <p>After setting up the router links,I used following custom CSS to hide the link underline by default:</p>
  
  <pre><code>let styles = theme =&gt; ({
     TextLink: {
        position: 'relative',
        color: 'white',
        textDecoration: 'none',    
        '&amp;:hover':{
              color: 'white',
        },
  });
  </code></pre>
  
  <p>using this I was able to hide. </p>
  
  <p>My objective is to make a link that will display underline on hovering with transition effect(Link underline grows from center to both ends).</p>
  
  <p>Modified CSS or Code samples with any additional node packages would be helpful.</p>