CSScontent 속성은 생성한 값으로 요소를 대체합니다.content 속성으로 추가한 요소는 "익명대체 요소"입니다.

/* 다른 값과 조합할 수 없는 키워드 */content: normal;content: none;/* <image> 값 */content: url("http://www.example.com/test.png");content: linear-gradient(#e66465, #9198e5);/* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 */content: url("http://www.example.com/test.png") / "This is the alt text";/* 앞선 값은 모두 ::before와 ::after에만 적용 가능 *//* <string> 값 */content: "prefix";/* <counter> 값 */content: counter(chapter_counter);content: counters(section_counter, ".");/* HTML 속성값으로 연결하는 attr() */content: attr(value string);/* 언어와 요소 위치 기반 키워드 */content: open-quote;content: close-quote;content: no-open-quote;content: no-close-quote;/* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 */content: open-quote chapter_counter;/* 전역 값 */content: inherit;content: initial;content: unset;

구문

값

none

의사 요소를 생성하지 않음.

normal

::before와::after 의사 요소인 경우none.

<string>

요소의 "대체 텍스트". 모든 숫자와 문자가 가능합니다. 단, 라틴계 문자가 아닌 경우 유니코드 이스케이프 시퀀스를 사용해 인코딩해야 합니다. 예를 들어,\000A9는 저작권 기호입니다.

<image>

<url>이나<gradient> 자료형을 사용한<image>, 또는element() 함수를 사용해 가리킨, 보여줄 웹페이지의 일부.

<counter>()

보통 숫자인CSS 카운터 값.counter()나counters() 함수를 사용해 지정할 수 있습니다.

counter() 함수는counter(<var>name</var>)과counter(<var>name</var>, <var>style</var>)의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본decimal)에 맞춰 서식을 적용합니다.

counters() 함수 역시counters(<var>name</var>, <var>string</var>)'과 'counters(<var>name</var>, <var>string</var>, <var>style</var>)의 두 형태를 가집니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 카운터 값의 목록으로 바깥쪽부터 시작하며 주어진 문자열을 사용해 구분합니다. 지정한 스타일(기본decimal)에 맞춰 서식을 적용합니다..

attr(x)

문자열로 변환한, 요소 속성x의 값.x 속성이 존재하지 않으면 빈 문자열을 반환합니다. 속성명의 대소문자 구분 여부는 문서 언어에 따릅니다.

open-quote |close-quote

quotes 속성에서 가져온 적절한 문자열을 사용해 대체.

no-open-quote |no-close-quote

콘텐츠는 추가하지 않고, 대신 따옴표의 중첩 단계를 증감.

형식 구문

content =
normal|
none|
[<content-replacement>|<content-list>][ /[<string>|<counter>|<attr()>]+]?|
<element()>

<content-replacement> =
<image>

<content-list> =
[<string>|<image>|<attr()>|contents|<quote>|<leader()>|<target>|<string()>|<content()>|<counter>]+

<counter> =
<counter()>|
<counters()>

<attr()> =
attr(<attr-name><attr-type>? ,<declaration-value>?)

<element()> =
element(<id-selector>)

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<quote> =
open-quote|
close-quote|
no-open-quote|
no-close-quote

<leader()> =
leader(<leader-type>)

<target> =
<target-counter()>|
<target-counters()>|
<target-text()>

<string()> =
string(<custom-ident> ,[first|start|last|first-except]?)

<content()> =
content([text|before|after|first-letter|marker]?)

<counter()> =
counter(<counter-name> ,<counter-style>?)

<counters()> =
counters(<counter-name> ,<string> ,<counter-style>?)

<attr-name> =
[<ident-token>? '|']?<ident-token>

<attr-type> =
type(<syntax>)|
raw-string|
number|
<attr-unit>

<id-selector> =
<hash-token>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<leader-type> =
dotted|
solid|
space|
<string>

<target-counter()> =
target-counter([<string>|<url>] ,<custom-ident> ,<counter-style>?)

<target-counters()> =
target-counters([<string>|<url>] ,<custom-ident> ,<string> ,<counter-style>?)

<target-text()> =
target-text([<string>|<url>] ,[content|before|after|first-letter]?)

<counter-name> =
<custom-ident>

<counter-style> =
<counter-style-name>|
<symbols()>

<syntax> =
  '*'|
<syntax-component>[<syntax-combinator><syntax-component>]*|
<syntax-string>

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<counter-style-name> =
<custom-ident>

<symbols()> =
symbols(<symbols-type>?[<string>|<image>]+)

<syntax-component> =
<syntax-single-component><syntax-multiplier>?|
  '<'transform-list '>'

<syntax-combinator> =
  '|'

<syntax-string> =
<string>

<symbols-type> =
cyclic|
numeric|
alphabetic|
symbolic|
fixed

<syntax-single-component> =
  '<'<syntax-type-name> '>'|
<ident>

<syntax-multiplier> =
  '#'|
  '+'

<syntax-type-name> =
angle|
color|
custom-ident|
image|
integer|
length|
length-percentage|
number|
percentage|
resolution|
string|
time|
url|
transform-function

예제

헤딩과 따옴표

다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "Chapter"를 추가합니다.

HTML

<h1>5</h1><p>  According to Sir Tim Berners-Lee,  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"    >I was lucky enough to invent the Web at the time when the Internet already    existed - and had for a decade and a half.</q  >  We must understand that there is nothing fundamentally wrong with building on  the contributions of others.</p><h1>6</h1><p>  According to the Mozilla Manifesto,  <q cite="http://www.mozilla.org/en-US/about/manifesto/"    >Individuals must have the ability to shape the Internet and their own    experiences on the Internet.</q  >  Therefore, we can infer that contributing to the open web can protect our own  individual experiences on it.</p>

CSS

q {  color: blue;}q::before {  content: open-quote;}q::after {  content: close-quote;}h1::before {  content: "Chapter "; /* The trailing space creates separation                           between the added content and the                           rest of the content */}

결과

이미지와 텍스트

다음 예제는 링크 앞에 이미지를 추가합니다. 이미지를 가져오지 못한 경우 텍스트를 대신 추가합니다.

HTML

<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

a::before {  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")    " MOZILLA: ";  font:    x-small Arial,    sans-serif;  color: gray;}

결과

클래스 사용

다음 예제는 목록의 특별한 항목 뒤에 추가 텍스트를 삽입합니다.

HTML

<h2>Paperback Best Sellers</h2><ol>  <li>Political Thriller</li>  <li>Halloween Stories</li>  <li>My Biography</li>  <li>Vampire Romance</li></ol>

CSS

.new-entry::after {  content: " New!"; /* The leading space creates separation                        between the added content and the                        rest of the content */  color: red;}

결과

이미지와 요소 속성

다음 예제는 링크 앞에 이미지를 추가하고, 뒤에id 속성의 값을 붙입니다.

HTML

<ul>  <li><a href="http://www.mozilla.org/"> Mozilla Home Page</a></li>  <li>    <a href="https://developer.mozilla.org/">      Mozilla Developer Network</a    >  </li></ul>

CSS

a {  text-decoration: none;  border-bottom: 3px dotted navy;}a::after {  content: " (" attr(id) ")";}#moz::before {  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");}#mdn::before {  content: url("mdn-favicon16.png");}li {  margin: 1em;}

결과

요소 대체

다음 예제는 요소의 콘텐츠를 이미지로 대체합니다.<url> 또는<image> 사용하면 콘텐츠를 대체합니다. 요소를 대체했으므로::before나::after는 생성하지 않습니다.

HTML

<div>Mozilla</div>

CSS

#replaced {  content: url("mdn.svg");}#replaced::after {  /* will not show if element replacement is supported */  content: " (" attr(id) ")";}

결과

접근성 고려사항

CSS로 생성한 콘텐츠는DOM이 포함하지 않고,접근성 트리에도 들어가지 않습니다. 따라서 특정 접근성 기술/브라우저 조합이 내용을 표현하지 않을 수 있습니다. 콘텐츠가 포함한 정보가 페이지의 목적을 이해하는 것에 중요하다면 주 문서로 포함하는 것이 좋습니다.

• Accessibility support for CSS generated content – Tink
• Explanation of WCAG, Guideline 1.3 – MDN
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

명세

브라우저 호환성

같이 보기

• ::after
• ::before
• ::marker
• quotes
• <url()> 함수