[CSS] ::before / ::after

Pseudo Element

- 일반적으로 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용됨

ex) ::before, ::after, ::first-letter, ::first-line, ::selection, ::marker, ::backdrop 등

 

::before / ::after

- 선택된 요소 앞 or 뒤에 content가 삽입됨 (콘텐츠를 비우려면 content: ""으로 설정)

- content에는 특수 기호가 주로 삽입됨 (스타일 목적이라 복사가 안됨)

- ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img>나 <br> 등 대체 요소에 적용할 수 없음 (= 닫을 수 없는 요소에는 넣을 수 없음)

- postion으로 적용하는 것은 비포로 만듦 (우선순위가 낮아서 왜지?)

div::before {
  content: "+";
}

 

예시

<span class="ribbon">마지막의 주황색 상자를 바라보세요.</span>

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "멋진 주황색 상자입니다.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

예시 결과

 

 

+ 

가상요소는 한 요소당 2개씩 붙이니까 더 만들고 싶으면 그 요소 자식들한테 가상요소 넣으면 됨

---

[출처] https://www.daleseo.com/css-before-after/

[CSS] ::before / ::after

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

의사 요소 - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/::after

::after (:after) - CSS: Cascading Style Sheets | MDN