content

CSS content 속성은 생성한 값으로 요소를 대체합니다. 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(name)'과 'counter(name, style)'의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본 decimal)에 맞춰 서식을 적용합니다.

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

attr(x)

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

open-quote | close-quote

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

no-open-quote | no-close-quote

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

형식 구문

normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?
where 
<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )
where 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<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 ]? )
<leader-type> = dotted | solid | space | <string>
where 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
<counter-style> = <counter-style-name> | symbols()
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
<counter-style-name> = <custom-ident>
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
where 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

예제

헤딩과 따옴표

다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "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 class="new-entry">Halloween Stories</li>
  <li>My Biography</li>    
  <li class="new-entry">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 id="moz" href="http://www.mozilla.org/">
    Mozilla Home Page</a></li>
  <li><a id="mdn" 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("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
}

li {
  margin: 1em;
}

결과

요소 대체

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

HTML

<div id="replaced">Mozilla</div>

CSS

#replaced {
  content: url("https://mdn.mozillademos.org/files/12668/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() 함수