:after 는 어느 상황일 때 쓰는 지 궁금합니다

Question

저는 :after를 글자 앞,뒤에 추가 정보를 넣는 방법으로만 알고 있었습니다.

선생님께서 코드 중간 중간에 :after를 사용하셨는데

이해가 되지 않아 인터넷을 찾아봐도 헷갈리네요 ㅠㅠㅠ

그래서 :after를 사용 안하고 작성해봤는데 제대로 작동이 안되는 부분들이 있어서요.

:after 가상 클래스는 선생님 코드에서 어떻게 쓰이는 지 궁금합니다

Answer

감사합니다 ㅎㅎㅎ

Answer

안녕하세요! 자취방님 :) 가상 선택자의 용도는 다양하지만 제가 자주 사용하는 2가지 패턴을 알려드릴게요 :)

after 가상선택자의 경우 실무에서 주로 사용되는 패턴은

1. :after {clear:both; display:block; content:'';} float요소를 해제할때 사용됩니다. :D

2. 예를들어 모션이나 어떤 디자인 적인 요소를 구현할때 쓸때없이 텅 비어있는 엘리먼트를 추가 해야하는 경우가 있습니다.

예를들어 아래 그림과 같은 햄버거 버튼을 만든다고 했을때 span 3개가 필요 하겠죠? 그럼

다음과 같은 구조가 될겁니다.

이럴때 after,before 선택자를 사용한다면 span한개로 구현 가능해 지겠죠?

<style>

.span {...}

.span:after {...}

.span:before {...}

</style>

다음과 같이 구현될 수 있는겁니다!

그리고 자취방님처럼 글자 앞뒤에 블릿이나 어떤 정보를 나타내기 위해 사용될 수 있겠죠 :)

궁금증이 풀리셨나요? 궁금증이 해결되지 않았다면 해당부분 코드를 올려보시길 바라겠습니다.

그럼 또다른 궁금증이 생길때 언제든 문의주세요 :D