underlines

by toubia95

HTML

<p>
Bonjour, ceci est un <a href="#">lien hypertexte</a> ! La classe !!!
</p>

CSS

body {
  font-family: sans-serif;
  color: black;
}

.entry-footer a {
  position: relative;
  color: var(--primary) ;
  text-decoration: none;
}

.entry-footer a:hover {
  color: var(--primary) ;
}

.entry-footer a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: blue;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.entry-footer a:hover::before {
  transform: scaleX(1.01);
}