content

문서에 새로운 내용을 생성하기 위해서 사용됩니다. :before, :after 의사 요소에만 적용됩니다. normal과 none 이외의 값들은 하나 이상 겹쳐서 사용할 수 있습니다.

CSS Level

CSS 2

상속

아니오

기본값

normal

사용법

content: " (" attr(href) ")";

object.style.content = "url(beep.wav)"

속성

normal

의사 요소가 none인 것으로 처리합니다.

none

의사 요소가 생성되지 않습니다.

<string>

텍스트 컨텐트를 지정합니다.

<uri>

이미지 파일등 외부 리소스를 지정합니다.

<counter>

목록 형태의 카운터를 추가합니다.

counter(name)

현재 의사 요소의 범위 내에서 주어진 이름을 갖는 가장 안쪽 레벨의 카운터 값을 반환합니다.

counter(name, style)

style은 리스트 스타일 중 하나이며, 기본 값은 decimal입니다.

counters(name, string)

현재 의사 요소의 범위 내에서 주어진 이름을 갖는 string으로 구분된 모든 레벨의 카운터 값을 반환합니다.

counters(name, string, style)

style은 리스트 스타일 중 하나이며, 기본 값은 decimal입니다.

<attr(identifier)>

현재 요소의 속성 중 identifier의 값을 반환합니다.

open-quote

quotes 프로퍼티에 정의된 적절한 인용기호로 대치됩니다.

close-quote

quotes 프로퍼티에 정의된 적절한 인용기호로 대치됩니다.

no-open-quote

내용을 생성하지는 않고 인용 레벨만 증가시킵니다.

no-close-quote

내용을 생성하지는 않고 인용 레벨만 감소시킵니다.

예

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}