::before & ::after

CSS에서

:hover, :active, :disabled 등등 이와 같은 형태를 사용하는 경우가 있습니다.

 

이들은 가상클래스(pseudo-class, 슈도-클래스)라고 합니다.

가상클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.
- mdn web docs(https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes)

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

selector:pseudo-class {
  property: value;
}

 

사용 가능한 가상 클래스로는 수십가지가 있지만 대표적인 가상 클래스로는 아래와 같습니다.

:active
:checked
:disabled
:empty
:first-child
:focus
:hover
:last-child
:not()
:nth-child()
:only-child
:read-only
:required

등 이 있습니다. 그 외에 작성하지 못한 것들도 있을 수 있으니 공식문서를 참고하시고 필요한 기능을 사용하시면 되겠습니다.

 

반면, 

::before와 ::after는 가상 요소(pseudo-element, 슈도-엘리먼트)라고 합니다.

가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
- mdn web docs(https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements)

참고: 규칙을 따라 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.

<h1>제목</h1>

h1::before {
  content: "앞에 추가"
}

h1::after {
  content: "뒤에 추가"
}

위와 같이 사용하면 아래와 같은 결과가 나타납니다.

 

가상 요소	설명
::before	요소 내용 앞쪽에 새 컨텐츠를 추가.
::after	요소 내용 끝에 새 컨텐츠를 추가.
::selection	마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.

 

가상 요소는 실험중인 기능을 포함하여 14가지가 존재하며 공식문서를 참고하여 필요한 곳에 사용하시면 됩니다.

지속해서 추가될 수 있고 삭제될 수 있으니 공식문서를 꼭 참고하시기를 바랍니다.

 

CSS는 지속해서 발전중에 있고 최근 많은 편의 기능들이 생겨 스크롤에 따른 애니메이션이라던지 

부드러운 슬라이드, 디바이스 화면크기에 맞게 한장씩 스크롤 하는 기능이라던지 

기존 js로 구현해야 했던 많은 것들이 CSS로도 가능해지고 있으니 최신 기능을 잘 참고하시면 시간을 많이 절약할 수 있으리라 생각됩니다.

 

 

참고

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

의사 클래스 - CSS: Cascading Style Sheets | MDN

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

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

 

 

 

 

https://hnm1.tistory.com/entry/css-%EA%B0%80%EC%83%81-%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%B0%A8%EC%9D%B4-before-after

[css] 가상 클래스 요소의 차이 ::before ::after