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 가상 요소