CSS 컨텐트 속성

정의 및 사용법

content 속성은 :before 및 :after 페인터 엘리먼트와 함께 사용하여 생성된 내용을 삽입합니다.

설명

이 속성은 요소 앞이나 뒤에 배치할 생성된 내용을 정의합니다. 기본적으로 이 내용은 행 내용이지만, 이 내용이 만들어진 상자 유형은 속성 display를 통해 제어할 수 있습니다.

다른 것도 참조하세요:

CSS 참조 가이드:CSS :before 가상 요소

CSS 참조 가이드:CSS :after 가상 요소

HTML DOM 참조 가이드:content 속성

예제

다음 예제는 각 링크 뒤에 괄호 안의 URL을 삽입합니다:

a:after
  {
  content: " (" attr(href) ")";
  }

직접 시도해 보세요

CSS 문법

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

속성 값

값 설명
none 　
normal 　
content specifications 　
inherit 부모 요소에서 content 속성 값을 상속해야 합니다.

기술 세부 사항

기본 값: normal
상속성: no
버전: CSS2
JavaScript 문법: object.style.content="url(beep.wav)"

브라우저 지원

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

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0