CSS ::after 가상 요소

정의와 사용법

CSS ::after 가상 요소는 지정된 요소의 내용 이후에 내용을 삽입하는 데 사용됩니다.

사용 content 속성 값 지정 삽입할 내용. content의 값은 다음과 같을 수 있습니다：

• 문자열：content: "Hello world!";
• 이미지：content: url(myimage.jpg);
• 없는 내용：content: none;
• 카운터：content: counter(li);
• 인용號：content: close-quote;
• 속성 값：content: " (" attr(href) ")";

푸시주의하세요, 삽입된 내용은 지정된 요소 내부에 여전히 위치합니다. 삽입된 내용은 요소 내부의 다른 내용 이후에 추가됩니다.

사용 ::before 특정 요소의 내용 이전에 내용을 삽입합니다。

실例

예제 1

각 <p> 요소의 내용 이후에 문자열을 삽입합니다：

p::after {
  content: " - 기억하세요";
}

직접 테스트해 보세요

예제 2

각 <p> 요소의 내용 이후에 문자열을 삽입하고 삽입된 내용의 스타일을 설정합니다：

p::after {
  content: " - 기억하세요";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

직접 테스트해 보세요

CSS 문법

::after {
  css 선언;
}

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 가상 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

관련 페이지

教程：CSS 가상 요소

참조:CSS ::before 가상 요소