이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

개요

CSS ::after 가상 요소(pseudo-element)는 선택된 요소(element)의 가상의 자녀 요소를 가르킵니다. 이는 주로 본문에 추가적인 내용을 덧붙이는 경우에 많이 쓰이는 content CSS 프로퍼티(property) 입니다. 이 요소는 인라인(inline)이 기본값입니다.

문법

/* CSS2 문법*/
element:after  { style properties }

/* CSS3 문법*/
element::after { style properties }

::after 표기는 CSS 3 에 기존 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements) 간의 구별을 위해 등장하였습니다. 브라우저들은 기존 CSS 2 방식에서 소개된 :after 표기도 같이 허용하고 있습니다.

예제

간단한 사용법

두가지 클래스를 만들어 봅시다. 하나는 지루한 단락(paragraph)을 다른 하나는 신나는 단락을 추가하겠습니다. 우리는 각 단락들을 가상 요소를 통해 기존 단락의 마지막에 덧붙일 수 있습니다.

<p class="boring-text">적당히 좋고 오래되고 지루한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 적당한 글입니다.</p>
<p class="exciting-text">MDN에 공헌하는 것은 쉽고 재밌습니다.
동작하는 예제를 새로 추가하거나 기존의 흥미진진한 예제를 더 좋게 만들기 위해서 편집 버튼을 눌러보세요.</p>
.exciting-text::after {
  content: "<- 바로 이 부분이 흥미진진합니다!"; 
  color: green;
}

.boring-text::after {
   content:    "<- 지루해요!";
   color:      red;
}

결과

장식적 예제

우리는 텍스트나 이미지의  content 프로퍼티들도 원하는 대로 주무를 수 있습니다.

<span class="ribbon">오렌지 박스가 어디있는지 알려 드립니다.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "이 오렌지 박스를 보세요.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

결과

툴팁

다음 예제는 ::after 가상 요소(pseudo-element)와 attr() CSS 표현식과 data-descr 커스텀 자료 속성(custom data attribute)의 결합으로 순수 CSS 사전 형식 툴팁을 구현한 것입니다. 밑의 동작하는 예제를 확인해 보시거나, 독립된 페이지에서 이 예제를 볼 수 있습니다.

<p>Here is the live example of the above code.<br />
  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
  <span data-descr="small popups which also hide again">tooltips</span>.<br />
  Dont be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
</p>
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::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;
}

결과

명세(Specifications)

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

브라우저 호환성(Browser compatibility)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:after support (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
::after support (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Support of animations and transitions 26 4.0 (2.0) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:after support ? ? ? ? ?
::after support ? ? ? ? ?
Support of animations and transitions 26 4.0 (4.0) No support No support No support

[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions.

참고자료(See Also)

문서 태그 및 공헌자

이 페이지의 공헌자: DeadIntegral, pelly_ryu, kuil09
최종 변경자: DeadIntegral,