공부하자
after 선택자. 엘리먼트에 포함된 모든 스타일이 끝났을 때 본문
after 선택자 : 다양한 선택자 중 엘리먼트에 포함된 모든 스타일이 끝났을 때 실행하겠다는 선택자 명령어.
(ex. 부모 엘리먼트에 포함된 자식 엘리먼트의 css가 끝이 난 후 실행하겠다. )
www.w3schools.com/cssref/sel_after.asp
CSS ::after Selector
CSS ::after Selector Example Insert some text after the content of each
element: p::after { content: " - Remember this"; } Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The ::after selector inserts something after t
www.w3schools.com
사용법 : 엘리먼트:after
자주 사용되는 예시 :
header:after{content:''; display: block; clear: both}
div:after{content:''; display: block; clear: both}
.container:after{content:''; display: block; clear: both}
float와 같이 다음 부모 엘리먼트에도 영향을 미치는 css 사용시 이를 해제 시켜주기 위한 경우에 많이 사용된다.
선택자 사용시 css에 반드시 content:''; 속성을 포함하여야 한다.
새로 생성되는 가상 요소의 속성을 지정해주는 것인데 빈 값으로도 지정이 가능하므로 반드시 작성.
추가하지 않을 경우 적용이 안된다.
보통 작업할때 overflow:hidden을 사용해 영역을 닫아주거나 + clear:both를 이용하여 작업을 했었다.
부모 엘리먼트에 overflow:hidden을 작성해주면 웬만하면 다음 부모 엘리먼트에 영향을 미치지 않는다.
'CSS정리' 카테고리의 다른 글
| 좌우배치를 하는 다양한 방법 (float, display:table, flex) (0) | 2021.01.04 |
|---|---|
| 여러가지 단위 : %, vw, vh, em, calc (0) | 2020.12.04 |
| 인접 형제 선택자 (0) | 2020.12.03 |
| (first, last, nth)-child : 순서 선택자 (0) | 2020.12.03 |
| before 선택자. 엘리먼트의 스타일이 적용되기 전에 (0) | 2020.11.30 |