문서에 새로운 내용을 생성하기 위해서 사용됩니다. :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;
}
