<a class="self-draw-anim text-md" href="#0">
  <span class="self-draw-anim__label">Read More</span>
  
  <svg class="self-draw-anim__decoration" viewBox="0 0 156 40" preserveAspectRatio="none" aria-hidden="true">
    <path 
      d="M77.867,1.875l-59.314,13.4C13.5,16.418,8.184,17.689,4.406,21.139c-1.421,1.3-2.631,3.081-2.37,4.956A5.586,5.586,0,0,0,3.49,28.908c2.143,2.449,5.293,3.852,8.445,4.847A73.518,73.518,0,0,0,27.41,36.55c8.793.8,17.637.89,26.469.975q20.22.2,40.44.378a179.741,179.741,0,0,0,21.225-.657c7.9-.87,15.638-2.778,23.345-4.681,3.058-.755,6.19-1.542,8.785-3.282s4.584-4.66,4.261-7.7c-.5-4.659-5.718-7.245-10.311-8.717C117.7,5.2,92.044,4.657,66.842,4.365,54.984,4.228,43.011,4.14,31.413,6.534"
      fill="none"
      stroke-miterlimit="10"
      stroke="currentColor" />
  </svg>
</a>


/* πŸ’‘ Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ рисованиС SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
/* πŸ”— https://s-sd.ru/blog_studio_design/risovanie-svg-animacii/ */


.self-draw-anim {
  text-decoration: none;
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-family: Arial;
}

.self-draw-anim__label {
  position: relative;
  z-index: 2;
}

.self-draw-anim__decoration {
  pointer-events: none;
  max-width: none;
  position: absolute;
  z-index: 1;
  top: -6px;
  left: -12px;
  display: block;
  width: calc(100% + 24px);
  height: calc(100% + 12px);
}

.self-draw-anim__decoration > * {
  --path-lenght: 367;
  stroke-width: 2px;
  stroke-dasharray: var(--path-lenght);
  stroke-dashoffset: var(--path-lenght);
  transition: stroke-dashoffset 0.5s;
}

.self-draw-anim:hover .self-draw-anim__decoration > * {
  stroke-dashoffset: 0;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  place-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.