CSS 가상선택자 before, after

가상선택자 bofore와 atfer

 

1. before 와 atfer 는 말 그대로 그 해당 엘리먼트(노드)가 만들어지고 난 뒤에 before(앞) 과 after(뒤)에 content가 작성 됨

 

1) 간단한 활용법 var_style

 

 

See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen.

2) 다른 활용법

 

동적으로 css 함수를 넣어서 사용 할 수도 있음

content : attr() (동적인 css 텍스트)

content : conuter() (숫자를 세어주는 css 함수)

 

See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen.

 

3) 크로스 브라우징 이슈

 

크롬, firefox, oprea, safari 모든 가상요소 before, atfer를 지원 함.

 

IE의 경우

 

IE9 버전 이하의 경우에서는 작동하지 않음.