그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기

Question

먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다:

내 웹사이트는 여기 https://wordpress-493302-3130963.cloudwaysapps.com/

CSS 전환을 사용하여 달성하려는 목표의 절반을 성공적으로 달성했지만 위 이미지와 같이 생성되는 버튼의 섀도 복사본을 볼 수 없습니다. 내 CSS는 다음과 같습니다

으아아아

JS나 다른 것을 사용하여 구현할 수 있다면 가능하지만 CSS가 선호됩니다.

메가 메뉴 플러그인에서 생성된 html은 포함되지 않지만 원하는 경우 포함할 수 있습니다.

Answer 1

버튼 2개/라벨 1개를 만드는 것이 좋습니다:

으아아아 으아아아

Answer 2

::before를 사용하여 이 효과를 적용할 수 있습니다.

으아아아 으아아아