[css] 가상요소 before & after

가상요소(Pseudo-Element)란?

존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택을 할 수 있도록 한다.

::before, ::after 뿐만 아니라 ::placeholder, ::first-line, ::first-letter 등이 포함된다.

 

::before – 실제 내용 바로 앞에서 생성되는 자식요소 ::after – 실제 내용 바로 뒤에서 생성되는 자식요소​

 

 

before와 after 사용 시, content 속성이 반드시 필요하다. (content:"어쩌구저쩌구")

content는 html에 포함되지 않은 정보를 css에서 새롭게 생성해준다.

이렇게 말하니 잘 와닿지 않는데, 예시를 만들어 살펴보자.

 

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.

 

content: ""로 빈 내용을 넣고, background에 이미지를 준 경우

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.

 

가상요소가 동작하지 않는다면?

1. content: "..." 내용이 없거나

2. 크로스 브라우징 문제이거나

3. 콜론 표기 문제일 가능성이 있다.

 

css2까지는 콜론 1개(:before)로 표기했으나, css3부터는 콜론 2개(::before)로 표기하기 시작했다.

IE7의 경우에는 콜론이 1개든 2개든 동작하지 않는다고 한다.

 

또한, 사파리에서는 가상요소의 transitions를 지원하지 않는다고 한다.

 

 

 

 

before와 after는 위 예시처럼 단순히 텍스트나 이미지를 추가하는 것뿐만 아니라,

애니메이션을 먹여 다양한 방법으로 사용된다(평소에 헷갈렸던 지점)

 

- figcaption 자체에 준 가상요소는 텍스트를 감싸는 수평선에 해당한다.

- figcaption안에 있는 div에 준 가상요소는 텍스트를 감싸는 수직선에 해당한다.

- 마우스오버 발생 시 translateX와 translateY 값을 조정하여 수평선, 수직선이 날아오는 것처럼 보이게 했다.

 

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.