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

안녕하세요! 자취방님 :) 가상 선택자의 용도는 다양하지만 제가 자주 사용하는 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

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