가상 엘리먼트 ::before ::after

 

CSS 의 ::before및 ::after 가상 요소를 사용하면 HTML에 있을 필요 없이 페이지에 콘텐츠를 삽입할 수 있다. 최종 결과는 실제로 DOM에 없지만 페이지에는 마치 DOM에 있는 것처럼 나타난다.

왜 사용하나?

• 생성된 콘텐츠가 위치적으로 요소 콘텐츠 앞에 오기를 원한다.
• 콘텐츠 ::after는 소스 순서에서도 "이후"이므로 자연스럽게 서로 쌓이면 ::before 위에 배치됩니다.

콘텐츠는 여전히 적용된 요소 내에 있다. 

https://css-tricks.com/almanac/selectors/a/after-and-before/

 

 

z-index: -1

CSS ::before나 ::after에 `z-index: -1` 을 준다면, 가상요소의 컨텐츠가 요소의 컨텐츠보다 뒤에 위치하게 된다.

→ figure의 ::after에 `z-index:-1` 을 주지 않는다면 a태그가 뒤로 가려지기 때문에 범죄분석 페이지로 이동할 수 없게 된다.

 

그런데 ::before에서는 `z-index:-1`  없어도 가능하네?

어찌보면 당연한 .. !

-> before는 a 태그의 전에, after는 a 태그의 뒤에 위치하기 때문에 before는 이미 a태그보다 뒤에 위치해 있다.

 

• 가상 요소의 컨텐츠가 표시될 때 가장 중요한 것은 선택한 요소의 태그 안에 가상요소가 위치해야 한다는 것이다.
• 가상 요소도 실제 요소처럼 배치 속성을 부여해서 자유롭게 위치를 조절할 수 있다!

 

figure에 `position: relative`를 넣고 :before이나 :after에 `position:absolute`를 하면 figure를 기준으로 자유롭게 위치를 조절할 수 있다.

&:before, &:after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
	z-index: -1;
    border-radius: 50%;
    border: 3px solid #bbb;
  }

 

위처럼 top, bottom, right, left를 모두 0px로 하면, top(위), bottom(아래), right(오른쪽), left(왼쪽)으로부터 0px 떨어져 있도록 하는 것이기 때문에 아래와 같이 요소의 테두리를 감싸고 있는 형태가 된다. (흥미 돋았던 내용이었다)