hover 시에, 양 방향 전부 효과를 줄 수 있는 방법

Question

선생님 양 옆에서 색을 차게 할 방법은 없나요? 예를 들어서 위->아래 / 왼쪽->오른쪽이 동시에 차는 효과가 생기게끔 하고 싶어요. 색을 채우는 게 아니라 전 시간에 했던 것 처럼 선을 긋는 것도 마찬가지인데요. 테두리가 왼쪽 오른쪽 위쪽 아래쪽 4개가 있는데 호버했을 시에 이 네 방향이 전부 선이 그어지게 하려면 어떻게 해야 할까요?

코딩웍스(Coding Works) · Answer

아... 질문 내용이 뭔지 알겠어요. html 엘리먼트는 before after를 1개 씩만 가질 수 있으니까 그렇게 하시려면 html 구조를 아래처럼 하셔야 할 거에요. z-index로 순서는 정리해주시구요. CSS는 아래처럼 하시며 될거에요. a { width: 100px; height: 100px; position: relative; border-radius: 50%; } a span:first-child, a span:last-child { position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: inherit; } a span:first-child:before {...} a span:first-child:after {...} a span:last-child:before {...} a span:last-child:after {...}

조용한 오리 · Answer

제가 질문 내용을 이해가 안 가게 적은 것 같습니다! 왼쪽 위에서 오른쪽 위로 가는 것을 before로 작성하고 오른쪽 아래에서 왼쪽 아래로 가는 것을 after로 작성했다고 했을 때,   왼쪽 위에서 왼쪽 아래로 가는 것과 오른쪽 아래에서 오른쪽 위로 가는 것을 추가하고 싶은데 before과 after가 이미 쓰여있는데 중복 사용으로는 추가가 되지 않는 것으로 알고 있습니다.   &darr;&rarr;         &larr;&uarr; 이렇게 두 가지를 동시에 추가하고 싶은데 어떻게 하면 될까요?

코딩웍스(Coding Works) · Answer

예를들어, 위에서 아래로 가는 것은 :before를 사용하고, 왼쪽에서 오른쪽으로 가는 것은 :after를 사용하시면 됩니다. 코드가 많아져서 그렇지 지금 하신 내용에서 크게 다르지는 않습니다.