CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS counter-increment 속성 CSS3 columns 속성

CSS content 속성 사용 방법 및 예제

content CSS 속성과::before와::afterpseudo 요소요소 내용을 생성하기 위해 결합 사용합니다。

아래 표는 이 속성의 사용 방법 및 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값：	normal
적용 가능한 항목：	::before와::after pseudo 요소
thừa kế：	없음
애니메이션 가능성：	아니요。참조하십시오 애니메이션 속성。
버전：	CSS 2、3
JavaScript 문법：	object.style.content="counter"

content의 사용 문법

이属性的 문법은 다음과 같습니다：

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

아래 예제는 content 속성을 사용하는 방법을 보여줍니다。

예제

　　h1::before {
　　　content: "Chapter: ";
　　　display: inline;
　　}

보기에‹/›

주의:display CSS 속성은 content 속성을 사용하여 생성된 내용이 블록 상자나 인라인 상자에 배치되는지를 제어합니다。

속성 값

아래 표는 이 속성의 값을 설명합니다。

값	설명
normal	(before)와 (after)에 대해 pseudo 요소,그는 어떤 값도 계산하지 않습니다. 이는 기본 값입니다。
none	의pseudo 요소생성하지 않습니다。
counter	이 값은 content를 카운터로 설정합니다. 더 많은 정보는 다음을 참조하십시오:counter-reset및counter-increment속성
열	지정된 문자열(텍스트 내용)을 삽입합니다。
url(url)	의 값 url()는 외부 자원(예: 이미지)을 지정합니다. 자원이나 이미지가 표시되지 않으면 무시하거나 대체 문자를 표시합니다。
attr(속성)	이 함수는 선택된 요소 앞이나 뒤에 지정된 속성 값을 삽입합니다. 선택자 주제가 지정된 속성을 가지지 않으면 빈 문자열을 삽입합니다。 주의: 　 속성 이름은 인용 기호로 묶지 않습니다。
open-quote	왼쪽 인용 기호를 삽입합니다. 이 값은 quotes 속성에 적절한 문자로 대체됩니다。
close-quote	오른쪽 인용 기호를 삽입합니다. 이 값은 quotes 속성에 적절한 문자로 대체됩니다。
no-open-quote	시작 인용 기호를 표시하지 않고, 인용 기호의 내장 수준을 증가(감소)합니다。
no-close-quote	오른쪽 인용 기호를 표시하지 않고, 인용 기호의 내장 수준을 증가(감소)합니다。
initial	이 속성을 기본 값으로 설정합니다。
inherit	지정된 경우, 관련 요소는 부모 요소 content의 속성 값을 사용합니다。

브라우저 호환성

content 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	Firefox 1+ Google Chrome1+ Internet Explorer 8+ Apple Safari 1+ Opera 4+

경고: Internet Explorer 7그리고 이전 버전에서 content 속성을 지원하지 않습니다.IE8제한된유효한 값이 지정된 경우에만 지원됩니다。

더 읽기

다음 튜토리얼을 참조하십시오:CSS伪 요소。

관련 속성:counter-reset，counter-increment。

CSS counter-increment 속성 CSS3 columns 속성