::after (:after)

개요

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)

브라우저 호환성(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!

[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)

• ::before, content