가상요소(Pseudo-Element) ::before ::after

가상 요소(Pseudo-Element)

​

1. 가상 요소란?

- 존재하지 않는 요소를 존재하는 것처럼 부여하여 특정 부분을 선택할 수 있게 해주는 요소입니다.

​

2. 대표적인 가상 요소

::before → 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 추가합니다.

::after → 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 추가합니다.

::first-line → 텍스트 첫 줄에 스타일 적용합니다.

::first-letter → 첫 번째 글자에 스타일 적용합니다.

::selection → 요소의 텍스트에서 사용자에 의해 선택된 영역의 속성 변경합니다.

::placeholder → input 삽입 텍스트에 스타일 적용합니다.

​

3. ::before와 ::after

::before → 실제 내용 바로 앞에서 생성되는 자식 요소입니다.

::after → 실제 내용 바로 뒤에서 생성되는 자식 요소입니다.

::before와 ::after를 사용할 땐 content 속성이 꼭 필요합니다.

​

3.1 content란?

html 문서에 정보로 포함되지 않은 요소를 css에서 새롭게 생성시켜줍니다.

 

4. ::before와 ::after 실전

4.1 구분선 넣기

(예시)

4.2 float 해제

-부모 요소에게 after추가하여 clear:both 할 수 있습니다.

​

4.3 내용 추가

-요소의 앞뒤에 before와 after로 정보 추가가 가능합니다.

​

5. ::before와 ::after의 문제점

-지원범위 IE8, IE7에서는 적용이 안됩니다.(IE8에서는 싱글 콜론 사용하면 적용이 됩니다.)

-리더에서 읽히지 않거나 쓸데없는 텍스트를 읽는 혼란이 생깁니다.