English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성大全

CSS :after 선택자

전체 CSS 선택자 참조 매뉴얼

온라인 예제

각 <p> 요소 뒤에 삽입할 내용:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
<style>
p:after
{　
content:"-　표시 ";
}
</style>
</head>
<body>
<p>나의 이름은 리리입니다</p>
<p>나는 바닷가에 살고 있습니다</p>
<p><b>주의: </b> :after를 IE에서 사용해야 합니다8중에서 실행하려면, 반드시 !DOCTYPE </p>
</body>
</html>
테스트 보기 ‹/›

정의와 설명

:after 선택자를 사용하여 선택된 요소 뒤에 내용을 삽입합니다.

을 사용하여content 속성을 사용하여 삽입할 내용을 지정합니다.

브라우저 호환성

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

선택자




::after4.09.0
부분은 8.0		3.53.17.0
부분은4.0

주의: after를 IE에서 사용해야 합니다8에서 실행하려면, 반드시 선언해야 합니다!DOCTYPE .

관련 기사

CSS 강의: CSS Pseudo-elements

CSS 선택자 참조 매뉴얼: CSS :before 선택자

온라인 예제

각 <p> 뒤에 추가되는 내용과 스타일:

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
<style>
p:after
{　
　　　　content:"-　표시 ";
　　　　background-color:yellow;
　　　　color:red;
　　　　font-weight:bold;
}
</style>
</head>
<body>
<p>나의 이름은 리리입니다</p>
<p>나는 바닷가에 살고 있습니다</p>
<p><b>주의: </b> :after를 IE에서 사용해야 합니다8중에서 실행하려면, 반드시 !DOCTYPE </p>
</body>
</html>
테스트 보기 ‹/›
CSS 함수(Function)CSS 선택자 전체 가이드서