.see-more{ --hover-bg: var(--color-bg); font-weight: 500; color: var(--color-txt); color: currentColor; text-decoration: none; span{ display: none;} &::after{ content: "→"; position: relative; display: inline-block; padding-left: 0.75ch; left: 0; transition: left .4s ease-in-out; } &:hover{ text-decoration: underline; &::after{ left: 0.5ch; text-decoration: underline var(--hover-bg); } } }