Link with arrow and underline animation

link-with-arrow-and-underline-animation

selector .wp-block-boldblocks-svg-block__inner {
  --ac: var(--bb--text--color, var(--wp--preset--color--primary, #9DFF20));
  --td: var(--bb-attr--transition-duration, .25s);
  
  position: relative;
  padding: var(--bb--padding-top--sm, .5rem) var(--bb--padding-right--sm, 0) var(--bb--padding-bottom--sm, .5rem) var(--bb--padding-left--sm, 0);
  color: var(--ac);
  background-color: var(--wp--preset--color--transparent, transparent);
  border-color: var(--wp--preset--color--transparent, transparent);
  transition: all var(--td);
}
selector .wp-block-boldblocks-svg-block__inner::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 1.5em);
  height: 2px;
  pointer-events: none;
  content: "";
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform var(--td);
}
selector .wp-block-boldblocks-svg-block__inner:hover {
  background-color: var(--wp--preset--color--transparent, transparent);
}
selector .wp-block-boldblocks-svg-block__inner:active::after,
selector .wp-block-boldblocks-svg-block__inner:focus::after,
selector .wp-block-boldblocks-svg-block__inner:hover::after {
  transform: scaleX(1);
}
selector svg {
  transition: transform var(--td);
  transform: translateX(0);
}
selector:hover svg {
  transform: translateX(4px);
}
selector path:last-child {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset var(--td);
}
selector:hover path:last-child {
  stroke-dashoffset: 20;
}