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;
}

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.