JSFiddle - React, Tailwind, and code Playground

by schtroumpheh

HTML

<p>Deinde cibo abunde perlato castra die sunt mota. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#">Texte du lien</a> quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

CSS

p a {
	text-decoration:none;
	border-bottom:0;
	background: linear-gradient(180deg, rgb(0,0,0) 100%, rgb(255,0,0) 100%);
	background-size: 100% 12%, 0 14%;
	background-position: bottom left, bottom left;
	background-repeat: no-repeat, no-repeat;
  
	transition-duration: 1s;
	transition-property: background-size;
}

p a:hover {
	text-decoration:none;
	border-bottom:0;
	background: linear-gradient(180deg, rgb(0,0,0) 100%, rgb(255,0,0) 100%);
	background-size: 0 14%, 100% 14%;
	background-position: bottom right, bottom left;
	background-repeat: no-repeat, no-repeat;
    
    transition-duration: 1s;
    transition-property: background-size;
}