::before와 ::after (가상요소)는 무엇일까?

1. 가상요소 란?

- 가상 클래스(Pseudo-Class)는 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다.

- 가상 요소는, 각상 클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.

 

 

아래 간단한 예제를 살펴보자.

See the Pen pseudo-element-study by Bumday (@bumdayy) on CodePen.

first-child(가상클래스)- class를 지정하지 않아도 li의 첫번째 자식요소를 선택하여 제어할 수 있다.
first-letter(가상요소) - li 내의 첫번째 글자를 감싸고 있는 요소가 없어도 있는 것과 같이 제어해줄 수 있다.

 

 

대표적으로 사용되고 있는 가상요소들은 아래와 같다.

요소	소개
::first-line	요소의 텍스트에서 첫 줄에 스타일을 적용한다.
::first-letter	요소의 첫번째 글자에 스타일을 적용한다.
::before	요소의 컨텐츠 시작부분에 생성된 컨텐츠를 추가한다.
::after	요소의 컨텐츠 끝부분에 생성된 컨텐츠를 추가한다.
::selection	요소의 텍스트에서 사용자에 의하여 선택(드래그)된 영역의 속성을 변경한다.
::placeholder	Input 필드에 힌트 텍스트에 스타일을 적용한다.

 

2. ::before와 ::after에 대해

 

W3C 스펙에서는 다음과 같이 설명한다.

::before - 실제 내용 바로 앞에서 생성되는 자식요소

::after - 실제 내용 바로 뒤에서 생성되는 자식요소

 

 

 

사용 구문은 다음과 같다.

.class-name:before {
	content:'';
	width:;
	height:;
}

::before와 ::after를 쓸 땐 content라는 속성이 꼭 필요하다. content에 대해서는 아래에 설명할 것이다.

 

 

 

그렇다면 가상 선택자는 언제 쓰일까? 주로 아래와 같은 상황에서 CSS 가상 선택자를 사용한다.

• 꾸밈을 위해 의미 없는 태그를 쓰지 않기 위해. (태그 최소화)
  • 목록형 꾸밈
  • 버튼 꾸밈
  • 간단한 아이콘 만들기(닫기 버튼, 화살표 등)
  • 이미지 아이콘을 넣고 싶을 때
  • 꾸밈 한글을 넣고 싶을 때(tag의 #, 또는 콤마 등)

 

 

::before와 ::after와 꼭 함께 쓰이는 'content'는 가짜속성이다.

HTML문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주기 때문이다.

 

따옴표 "" 안에는 텍스트 내용을 넣고, 없으면 따옴표만 넣는다.

 

 

아래의 표는 contents를 쓸 때, 대표적으로 사용되는 속성들이다.

속성	사용
normal	아무것도 표시하지 않는 기본값
string	문자열 생성
image	이미지나 비디오를 불러올 수 있다. 크기 조절이 불가능하다.
counter	순서를 매길 수 있다. counter-increment, counter-reset 함께 사용
none	아무것도 표시하지 않는다.
attr	해당 속성의 속성값 표시

 

 

아래는 ::before, ::after CSS를 적용한 예제이다.

See the Pen test by Bumday (@bumdayy) on CodePen.

 

 

 

:before와 ::before의 (콜론갯수)차이

차이는 없다. 오히려 더블 콜론(::) ::before을 쓴다면 ie8 이하 버전은 적용이 되지 않기 때문에 클론 하나만(:) :before 쓰는 것이 좋다.

CSS2에서는 클론이 하나였다가, CSS3에는 더블 클론으로 바뀌었다.

 

 

가상선택자 적용이 안되는 경우

1. 폼(form, input...) 태그와 이미지 태그(img)는 가상 선택자가 적용되지 않는다.

2. ie7 이하 버전은 지원하지 않는다.

3. ie8 이하 버전은 더블콜론(::)이 적용되지 않는다.

 

이외 주의할점은 가상선택자는 부피가 없으므로, 아이콘을 표현할땐 꼭 너비와 높이를 정해주어야 한다.

 

 

 

 

 

---

#References

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

https://green-webdesigner.tistory.com/20

https://blogpack.tistory.com/1025