인프런 커뮤니티 질문&답변

아... 질문 내용이 뭔지 알겠어요.

html 엘리먼트는 before after를 1개 씩만 가질 수 있으니까 그렇게 하시려면 html 구조를 아래처럼 하셔야 할 거에요.

z-index로 순서는 정리해주시구요.

<a href="#none">

         <i class="fa fa-facebook"></i>

         <span></span>

         <span></span>

</a>

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 {...}

제가 질문 내용을 이해가 안 가게 적은 것 같습니다!

왼쪽 위에서 오른쪽 위로 가는 것을 before로 작성하고

오른쪽 아래에서 왼쪽 아래로 가는 것을 after로 작성했다고 했을 때,

왼쪽 위에서 왼쪽 아래로 가는 것과

오른쪽 아래에서 오른쪽 위로 가는 것을 추가하고 싶은데

before과 after가 이미 쓰여있는데 중복 사용으로는 추가가 되지 않는 것으로 알고 있습니다.

↓→

        ←↑

이렇게 두 가지를 동시에 추가하고 싶은데 어떻게 하면 될까요?

예를들어,

위에서 아래로 가는 것은 :before를 사용하고,

왼쪽에서 오른쪽으로 가는 것은 :after를 사용하시면 됩니다.

코드가 많아져서 그렇지 지금 하신 내용에서 크게 다르지는 않습니다.