Render the underline border with loop animation on hover

mixin-animate-border-bottom-on-hover-loop.scss

@mixin animate-border-bottom-on-hover-loop() {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		border-bottom: 1px solid currentColor;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: auto;
		right: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid currentColor;
	}

	&:hover {
		&::before {
			animation: by-zero-to-full-width var(--wp--custom--transition--duration) ease-out var(--wp--custom--transition--duration) both;
		}

		&::after {
			animation: by-full-width-to-zero var(--wp--custom--transition--duration) ease-in both;
		}
	}
}