:root {
    --arrow-color: var(--main-color);
    --arrow-color-hover: var(--second-color);
    --arrow-transition-duration: .5s;
}

.fancyLinkv2 {
    display: block;
    width: fit-content;
}

.arrow, .arrow::before, .arrow::after {
    background-color: var(--arrow-color);
    height: 1px;
    rotate: 0deg;
    position: absolute;
    transition-duration: var(--arrow-transition-duration);
}

.fancyLinkInner:hover .arrow, .fancyLinkInner:hover .arrow::before, .fancyLinkInner:hover .arrow::after {
    background-color: var(--arrow-color-hover);
}

.arrow {
    width: 35px;
    left: 0;
    top: calc(50% - 1px);
}

.fancyLinkInner:hover .arrow {
    width: 50px;
}
.fancyLinkInner {
    transition-duration: var(--arrow-transition-duration);
    padding-left:45px;
    position: relative;
}
.fancyLinkInner:hover {
    padding-left:60px;
}

.arrow::after,
.arrow::before {
    width: 0;
    right: 0;
}

.arrow::before {
    display: block;
    content: '';
    top: 0;
    transform-origin: top right;
}

.arrow::after {
    display: block;
    content: '';
    bottom: calc(-100% + 1px);
    transform-origin: bottom right;
}

.fancyLinkInner:hover .arrow::before {
    width: 10px;
    rotate: 45deg;
}

.fancyLinkInner:hover .arrow::after {
    width: 10px;
    rotate: -45deg;
}