// Change link .link-change { position: relative; display: inline-block; margin: 0 6px; padding: 0 8px; color: $color-secondary; text-decoration: none; transition: color 200ms $ease-cubic; // Line &:after { content: ""; position: absolute; z-index: -1; background-color: rgba($color-secondary, 0.22); height: 14px; width: 100%; bottom: 5px; left: 0; border-radius: 50vh; transition: all 200ms $ease-cubic; transition-delay: 50ms; } // Icon .icon { position: relative; z-index: 3; top: -3px; display: inline-flex; justify-content: center; align-items: center; width: 22px; height: 22px; margin-left: 6px; background-color: #fff; border-radius: 50vh; svg { height: auto; } } // Hover &:hover { color: $color-text; &:after { background-color: rgba($color-secondary, 0.4); } svg * { animation-play-state: running; } } }