::after (:after)

CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

/* 링크 뒤에 화살표 추가 */
a::after {
  content: "";
}

참고: ::before::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img><br>대체 요소에 적용할 수 없습니다.

구문

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

참고: 의사 클래스의사 요소를 구분하기 위해 CSS3부터::after 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :after도 허용합니다.

예제

간단한 사용법

평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.

HTML

<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>

CSS

.exciting-text::after {
  content: " <- 흥미진진!"; 
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}

결과

장식 예제

content 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.

HTML

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

CSS

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

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

결과

툴팁

다음 예제는 ::after와 함께 CSS attr() 표현식, data-descr 사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다. JavaScript 없이요!

tabindex="0"을 추가해 각 span에 포커스가 갈 수 있도록 지정한 후, CSS :focus 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소처럼 의미를 담은 요소를 활용하는 편이 좋습니다.

HTML

<p>이 예제는
  <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께 약간의
  <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을 포함합니다.
</p>

CSS

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

결과

명세

Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::after' in that specification.
Working Draft No significant changes to the previous specification.
CSS Transitions Working Draft Allows transitions on properties defined on pseudo-elements.
CSS Animations Working Draft Allows animations on properties defined on pseudo-elements.
Selectors Level 3
The definition of '::after' in that specification.
Recommendation Introduces the two-colon syntax.
CSS Level 2 (Revision 1)
The definition of '::after' in that specification.
Recommendation Initial definition, using the one-colon syntax

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::afterChrome Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :after
Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :after
Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Notes Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :after
IE Full support 9
Full support 9
Full support 8
Alternate Name
Alternate Name Uses the non-standard name: :after
Opera Full support 7
Full support 7
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :after
Safari Full support 4
Full support 4
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :after
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Alternate Name
Alternate Name Uses the non-standard name: :after
Chrome Android Full support 18
Full support 18
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :after
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Before Firefox 57, Firefox had a bug where ::after pseudo-elements were still generated, even if the content property value were set to normal or none.
Notes Before Firefox 3.5, only the CSS level 2 behavior of :after was supported, which disallowed position, float, list-style-* and some display properties.
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :after
Opera Android Full support 10.1
Full support 10.1
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: :after
Safari iOS Full support 3.2
Full support 3.2
Full support 3.2
Alternate Name
Alternate Name Uses the non-standard name: :after
Samsung Internet Android Full support 1.0
Full support 1.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :after
Animation and transition supportChrome Full support 26Edge Full support 12Firefox Full support 4IE No support NoOpera Full support 15Safari No support NoWebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 4Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

같이 보기