<div class="thick-1">1. Hover me </div>
<div class="thick-2">2. Hover me </div>
<div class="thick-3">3. Hover me </div>
<div class="thick-4">4. Hover me </div>
<div class="thick-5">5. Hover me </div>
<div class="thick-6">6. Hover me </div>
<div class="thick-7">7. Hover me </div>
<div class="thick-8">8. Hover me </div>

.thick-1 {
  background: 
     linear-gradient(currentColor 0 0) 
     bottom /100% var(--d, 0px) no-repeat;
  transition: 0.5s;
}

.thick-1:hover {
  --d: 10px;
}

.thick-2 {
  background: 
     linear-gradient(#000 0 0) 
     50% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-2:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #fff;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.thick-3 {
  background: 
     linear-gradient(#000 0 0) 
    0% calc(-3px - 100%) /var(--d, 0%) 200% no-repeat;
  transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-3:hover {
  --d: 100%;
  background-position: 50% 0%;
  color: #fff;
  transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}

.thick-4 {
  background:
    linear-gradient(#000 0 0) left  /var(--d, 0%) 100% no-repeat,
    linear-gradient(#000 0 0) right /var(--d, 0%) 100% no-repeat;
  transition: 0.5s;
}
.thick-4:hover {
  --d: 100%;
  color: #fff;
}

.thick-5 {
  background:
    linear-gradient(#000 0 0) top    /100% var(--d, 0%) no-repeat,
    linear-gradient(#000 0 0) bottom /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-5:hover {
  --d: 100%;
  color: #fff;
}

.thick-6 {
  background:
    linear-gradient(#000 0 0) 
    left /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-6:hover {
  --d: 100%;
  color: #fff;
}

.thick-7 {
  background:
    linear-gradient(#000 0 0) 
    left /var(--d, 0%) 100% no-repeat;
  transition: 0.5s;
}
.thick-7:hover {
  --d: 100%;
  color: #fff;
}

.thick-8 {
  background:
    linear-gradient(#000 0 0) 
    top /100% var(--d, 0%) no-repeat;
  transition: 0.5s;
}
.thick-8:hover {
  --d: 100%;
  color: #fff;
}

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding:8px;
  cursor:pointer;
}

body {
  text-align:center;
}