가상 요소로 생성할 콘텐츠를 설정한다.
normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?
<escape-string>+
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
"\any text"
요소 또는 가상 요소의 내부에 렌더링되는 콘텐츠를 지정하기 위한 하나 이상의 순서를 갖는 목록을 나타낸다. 렌더링이 되면 목록에 포함된 각 값은 순서대로 익명 인라인 상자(anonymous inline boxes)로 바뀐다.
[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader> ]+
contents
키워드에 대한 명확한 정의가 나타나 있지 않다. 해당 W3C 모듈 사양에는 다음과 같은 이슈를 표기했다.
[ <string> | <escape-string> | <image> | <counter> | <quote> | <target> | <leader> | <attr()> ]+
해당 W3C 모듈 사양에 빠져있는 이스케이프(escape) 문자열 콘텐츠와 attr()
표기법을 추가했다.
attr(<arg-attr>)
<q-name> <attr-type>? , <declaration-value>?
<q-name>
은 참조될 속성명을 지정한다.
<attr-type>
은 생략이 가능하며 지정된 속성의 값이 사용되기를 원하는 가능한 타입을 지정한다. 가능한 타입은 제한적으로 정해졌으며 자세한 내용은 하위에 포함된 타입을 참조한다. 생략하면 기본값은 문자열이다.
<declaration-value>
는 폴백(fallback)으로 생략이 가능하며 속성이 없거나 지정된 유형으로 구문 분석을 하지 못하는 경우 대체 값으로 사용된다.
<attr-type>
과 <declaration-value>
타입이 지정된 구문은 아직 유저 에이전트의 확인이 필요하다.<q-name>
속성의 값을 ::before
또는 ::after
가상 요소의 콘텐츠로 사용하는 일반적인 구문이다.
(예)
::after {
content: attr(data-title);
}
속성 값이 어떤 종류의 CSS 값으로 해석될 것인지(attr()
함수의 결과 값 사용)와 해당 값에 어떤 특수 구문 분석이 수행될 것인지를 나타낸다.
string | url | ident | color | number | percentage |length | angle | time | frequency | flex | <dimension-unit>
리터럴 "%
" 문자(값이 "%
"인 <delim-token>)와 일치하거나 값이 <length>, <angle>, <time>, <frequency> 또는 <flex> 값(예: px
또는 ms
)에 대한 CSS 단위 중 하나인 식별자와 일치한다.
타입이 <angle>인 값으로 해석된다.
타입이 <color>인 값으로 해석된다.
타입이 <flex>인 값으로 해석된다.
타입이 <frequency>인 값으로 해석된다.
타입이 <ident>인 값으로 해석된다.
타입이 <length>인 값으로 해석된다.
타입이 <number>인 값으로 해석된다.
타입이 <percentage>인 값으로 해석된다.
타입이 <string>인 값으로 해석된다.
타입이 <time>인 값으로 해석된다.
타입이 <url>인 값으로 해석된다.
<declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.
<declaration-value>?
참조되는 속성의 이름을 나타낸다. 가상 요소에 적용되는 경우는 속성은 가상 요소의 원래 요소에서 참조된다.
모든 함수를 표시하지 않을 수도 있다.
"\any text"
순번 매김같은 값을 문자열이나 이미지로 나타내는 counter()
및 counters()
함수를 통해 생성된 값을 나타낸다.
<counter()> | <counters()>
모든 함수를 표시하지 않을 수도 있다.
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()
는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
leader( <leader-type> )
leader()
함수의 매개 변수를 나타낸다.
dotted | solid | space | <string>
모든 함수를 표시하지 않을 수도 있다.
큰따옴표 또는 작은 따옴표로 감싸진 <string>
타입을 나타낸다.
auto | none | [ <string> <string> ]+
open-quote | close-quote | no-open-quote | no-close-quote
따옴표에 대해 인쇄상 적절한 사용 값은 요소 또는 상위 요소의 콘텐츠 언어를 기반으로 UA(User Agent)에서 자동으로 선택한다.
인용 부호 속성의 적절한 문자열로 대체되고 인용 부호의 중첩 수준이 증가(감소)된다.
아무것도 삽입하지 않지만 따옴표의 중첩 수준을 증가(감소)시킨다.
아무것도 삽입하지 않지만 따옴표의 중첩 수준을 증가(감소)시킨다.
인용 부호를 생성하지 않는다.
인용 부호 속성의 적절한 문자열로 대체되고 인용 부호의 중첩 수준이 증가(감소)된다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
<target-counter()> | <target-counters()> | <target-text()>
지정된 <image> 타입으로 채워진 요소 또는 가상 요소를 대체 요소로 생성한다. 지정된 <image> 타입의 값이 유효하지 않은 이미지를 나타내는 경우 투명한 검정색으로 채워진 자연적인 너비와 높이가 0
인 이미지를 나타내는 것으로 처리된다.
<image>
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()
는 지원하지 않는다.
모든 함수를 표시하지 않을 수도 있다.
순번 매김같은 값을 문자열이나 이미지로 나타내는 counter()
및 counters()
함수를 통해 생성된 값을 나타낸다.
<counter()> | <counters()>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
요소에서는 요소의 자식으로 렌더링되지 않는다. 가상 요소에서는 마치 display: none
이 지정된 것 처럼 가상 요소 생성을 금지한다. 어떤 경우에도 요소 또는 가상 요소를 원래 요소로 갖는 가상 요소가 생성되는 것을 방지하지 않는다.
요소 또는 페이지의 margin box의 경우 콘텐츠로 처리한다. ::befoer
, ::after
의 경우 없음으로 처리한다. ::marker
, ::placeholder
, ::file-selector-button
의 경우 자체적으로 처리된다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
요소 또는 페이지의 margin box의 경우 콘텐츠로 처리한다. ::befoer
, ::after
의 경우 없음으로 처리한다. ::marker
, ::placeholder
, ::file-selector-button
의 경우 자체적으로 처리된다.
요소에서는 요소의 자식으로 렌더링되지 않는다. 가상 요소에서는 마치 display: none
이 지정된 것 처럼 가상 요소 생성을 금지한다. 어떤 경우에도 요소 또는 가상 요소를 원래 요소로 갖는 가상 요소가 생성되는 것을 방지하지 않는다.
선택자의 속성 값을 반환해준다.
문서의 구성 요소에 따라 순서를 설정하여 번호를 매길 수 있다. 일반적으로 가상 요소로 사용된다.
중첩된 목록 요소에 일관성 있는 순서를 설정하여 차례를 지정할 수 있다. 일반적으로 가상 요소로 사용된다.
중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.
선형 그라디언트를 생성한다.
원형 그라디언트를 생성한다.
설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.
설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.
CSS에서 사용할 외부 리소스를 가져온다.
이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade()
함수로 수행된다.
사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.
수평 공간에서 콘텐츠를 시각적으로 연결하는데 사용되는 반복 패턴을 생성한다.
따옴표에 대해 인쇄상 적절한 사용 값은 요소 또는 상위 요소의 콘텐츠 언어를 기반으로 UA(User Agent)에서 자동으로 선택한다.
아무것도 삽입하지 않지만 따옴표의 중첩 수준을 증가(감소)시킨다.
아무것도 삽입하지 않지만 따옴표의 중첩 수준을 증가(감소)시킨다.
인용 부호를 생성하지 않는다.
인용 부호 속성의 적절한 문자열로 대체되고 인용 부호의 중첩 수준이 증가(감소)된다.
인용 부호 속성의 적절한 문자열로 대체되고 인용 부호의 중첩 수준이 증가(감소)된다.
CSS에서 사용할 외부 리소스를 가져온다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Generated Content Module Level 3 | Last review date: 2022-6-14 |
다음 아래는 CSS에서 가상 요소로 사용할 수 있는 특수문자중 일부이다.
Symbol | Description | CSS Example |
---|---|---|
" | quotation mark | p:before{content:"\0022";} |
& | ampersand | p:before{content:"\0026";} |
< | less-than sign | p:before{content:"\003c";} |
> | greater-than sign | p:before{content:"\003e";} |
no-break space | p:before{content:"\00a0";} | |
¡ | inverted exclamation mark | p:before{content:"\00a1";} |
¢ | cent sign | p:before{content:"\00a2";} |
£ | pound sterling sign | p:before{content:"\00a3";} |
¤ | general currency sign | p:before{content:"\00a4";} |
¥ | yen sign | p:before{content:"\00a5";} |
€ | euro sign | p:before{content:"\20AC";} |
¦ | broken (vertical) bar | p:before{content:"\00a6";} |
§ | section sign | p:before{content:"\00a7";} |
¨ | umlaut (dieresis) | p:before{content:"\00a8";} |
© | copyright sign | p:before{content:"\00A9";} |
™ | trademark sign | p:before{content:"\2122";} |
ª | ordinal indicator, feminine | p:before{content:"\00aa";} |
« | angle quotation mark, left | p:before{content:"\00ab";} |
¬ | not sign | p:before{content:"\00ac";} |
| soft hyphen | p:before{content:"\00ad";} |
® | registered sign | p:before{content:"\00ae";} |
¯ | macron | p:before{content:"\00af";} |
° | degree sign | p:before{content:"\00b0";} |
℃ | degree celsius sign | p:before{content:"\2103";} |
℉ | degree fahrenheit sign | p:before{content:"\2109";} |
± | plus-or-minus sign | p:before{content:"\00b1";} |
² | superscript two | p:before{content:"\00b2";} |
³ | superscript three | p:before{content:"\00b3";} |
´ | acute accent | p:before{content:"\00b4";} |
µ | micro sign | p:before{content:"\00b5";} |
¶ | pilcrow (paragraph sign) | p:before{content:"\00b6";} |
· | middle dot | p:before{content:"\00b7";} |
¸ | cedilla | p:before{content:"\00b8";} |
¹ | superscript one | p:before{content:"\00b9";} |
º | ordinal indicator, masculine | p:before{content:"\00ba";} |
» | angle quotation mark, right | p:before{content:"\00bb";} |
¼ | fraction one-quarter | p:before{content:"\00bc";} |
½ | fraction one-half | p:before{content:"\00bd";} |
¾ | fraction three-quarters | p:before{content:"\00be";} |
¿ | inverted question mark | p:before{content:"\00bf";} |
À | capital A, grave accent | p:before{content:"\00c0";} |
Á | capital A, acute accent | p:before{content:"\00c1";} |
 | capital A, circumflex accent | p:before{content:"\00c2";} |
à | capital A, tilde | p:before{content:"\00c3";} |
Ä | capital A, dieresis or umlaut mark | p:before{content:"\00c4";} |
Å | capital A, ring | p:before{content:"\00c5";} |
Æ | capital AE diphthong (ligature) | p:before{content:"\00c6";} |
Ç | capital C, cedilla | p:before{content:"\00c7";} |
È | capital E, grave accent | p:before{content:"\00c8";} |
É | capital E, acute accent | p:before{content:"\00c9";} |
Ê | capital E, circumflex accent | p:before{content:"\00ca";} |
Ë | capital E, dieresis or umlaut mark | p:before{content:"\00cb";} |
Ì | capital I, grave accent | p:before{content:"\00cc";} |
Í | capital I, acute accent | p:before{content:"\00cd";} |
Î | capital I, circumflex accent | p:before{content:"\00ce";} |
Ï | capital I, dieresis or umlaut mark | p:before{content:"\00cf";} |
Ð | capital Eth, Icelandic | p:before{content:"\00d0";} |
Ñ | capital N, tilde | p:before{content:"\00d1";} |
Ò | capital O, grave accent | p:before{content:"\00d2";} |
Ó | capital O, acute accent | p:before{content:"\00d3";} |
Ô | capital O, circumflex accent | p:before{content:"\00d4";} |
Õ | capital O, tilde | p:before{content:"\00d5";} |
Ö | capital O, dieresis or umlaut mark | p:before{content:"\00d6";} |
× | multiply sign | p:before{content:"\00d7";} |
Ø | capital O, slash | p:before{content:"\00d8";} |
Ù | capital U, grave accent | p:before{content:"\00d9";} |
Ú | capital U, acute accent | p:before{content:"\00da";} |
Û | capital U, circumflex accent | p:before{content:"\00db";} |
Ü | capital U, dieresis or umlaut mark | p:before{content:"\00dc";} |
Ý | capital Y, acute accent | p:before{content:"\00dd";} |
Þ | capital THORN, Icelandic | p:before{content:"\00de";} |
ß | small sharp s, German (sz ligature) | p:before{content:"\00df";} |
à | small a, grave accent | p:before{content:"\00e0";} |
á | small a, acute accent | p:before{content:"\00e1";} |
â | small a, circumflex accent | p:before{content:"\00e2";} |
ã | small a, tilde | p:before{content:"\00e3";} |
ä | small a, dieresis or umlaut mark | p:before{content:"\00e4";} |
å | small a, ring | p:before{content:"\00e5";} |
æ | small ae diphthong (ligature) | p:before{content:"\00e6";} |
ç | small c, cedilla | p:before{content:"\00e7";} |
è | small e, grave accent | p:before{content:"\00e8";} |
é | small e, acute accent | p:before{content:"\00e9";} |
ê | small e, circumflex accent | p:before{content:"\00ea";} |
ë | small e, dieresis or umlaut mark | p:before{content:"\00eb";} |
ì | small i, grave accent | p:before{content:"\00ec";} |
í | small i, acute accent | p:before{content:"\00ed";} |
î | small i, circumflex accent | p:before{content:"\00ee";} |
ï | small i, dieresis or umlaut mark | p:before{content:"\00ef";} |
ð | small eth, Icelandic | p:before{content:"\00f0";} |
ñ | small n, tilde | p:before{content:"\00f1";} |
ò | small o, grave accent | p:before{content:"\00f2";} |
ó | small o, acute accent | p:before{content:"\00f3";} |
ô | small o, circumflex accent | p:before{content:"\00f4";} |
õ | small o, tilde | p:before{content:"\00f5";} |
ö | small o, dieresis or umlaut mark | p:before{content:"\00f6";} |
÷ | divide sign | p:before{content:"\00f7";} |
ø | small o, slash | p:before{content:"\00f8";} |
ù | small u, grave accent | p:before{content:"\00f9";} |
ú | small u, acute accent | p:before{content:"\00fa";} |
û | small u, circumflex accent | p:before{content:"\00fb";} |
ü | small u, dieresis or umlaut mark | p:before{content:"\00fc";} |
ý | small y, acute accent | p:before{content:"\00fd";} |
þ | small thorn, Icelandic | p:before{content:"\00fe";} |
ÿ | small y, dieresis or umlaut mark | p:before{content:"\00ff";} |
Œ | latin capital ligature oe | p:before{content:"\0152";} |
œ | latin small ligature oe | p:before{content:"\0153";} |
Š | latin capital letter s with caron | p:before{content:"\0160";} |
š | latin small letter s with caron | p:before{content:"\0161";} |
Ÿ | latin capital letter y with diaeresis | p:before{content:"\0178";} |
ƒ | latin small f with hook or function | p:before{content:"\0192";} |
ˆ | modifier letter circumflex accent | p:before{content:"\02c6";} |
˜ | small tilde | p:before{content:"\02dc";} |
Α | greek capital letter alpha | p:before{content:"\0391";} |
Β | greek capital letter beta | p:before{content:"\0392";} |
Γ | greek capital letter gamma | p:before{content:"\0393";} |
Δ | greek capital letter delta | p:before{content:"\0394";} |
Ε | greek capital letter epsilon | p:before{content:"\0395";} |
Ζ | greek capital letter zeta | p:before{content:"\0396";} |
Η | greek capital letter eta | p:before{content:"\0397";} |
Θ | greek capital letter theta | p:before{content:"\0398";} |
Ι | greek capital letter iota | p:before{content:"\0399";} |
Κ | greek capital letter kappa | p:before{content:"\039a";} |
Λ | greek capital letter lambda | p:before{content:"\039b";} |
Μ | greek capital letter mu | p:before{content:"\039c";} |
Ν | greek capital letter nu | p:before{content:"\039d";} |
Ξ | greek capital letter xi | p:before{content:"\039e";} |
Ο | greek capital letter omicron | p:before{content:"\039f";} |
Π | greek capital letter pi | p:before{content:"\03a0";} |
Ρ | greek capital letter rho | p:before{content:"\03a1";} |
Σ | greek capital letter sigma | p:before{content:"\03a3";} |
Τ | greek capital letter tau | p:before{content:"\03a4";} |
Υ | greek capital letter upsilon | p:before{content:"\03a5";} |
Φ | greek capital letter phi | p:before{content:"\03a6";} |
Χ | greek capital letter chi | p:before{content:"\03a7";} |
Ψ | greek capital letter psi | p:before{content:"\03a8";} |
Ω | greek capital letter omega | p:before{content:"\03a9";} |
α | greek small letter alpha | p:before{content:"\03b1";} |
β | greek small letter beta | p:before{content:"\03b2";} |
γ | greek small letter gamma | p:before{content:"\03b3";} |
δ | greek small letter delta | p:before{content:"\03b4";} |
ε | greek small letter epsilon | p:before{content:"\03b5";} |
ζ | greek small letter zeta | p:before{content:"\03b6";} |
η | greek small letter eta | p:before{content:"\03b7";} |
θ | greek small letter theta | p:before{content:"\03b8";} |
ι | greek small letter iota | p:before{content:"\03b9";} |
κ | greek small letter kappa | p:before{content:"\03ba";} |
λ | greek small letter lambda | p:before{content:"\03bb";} |
μ | greek small letter mu | p:before{content:"\03bc";} |
ν | greek small letter nu | p:before{content:"\03bd";} |
ξ | greek small letter xi | p:before{content:"\03be";} |
ο | greek small letter omicron | p:before{content:"\03bf";} |
π | greek small letter pi | p:before{content:"\03c0";} |
ρ | greek small letter rho | p:before{content:"\03c1";} |
ς | greek small letter final sigma | p:before{content:"\03C2";} |
σ | greek small letter sigma | p:before{content:"\03C3";} |
τ | greek small letter tau | p:before{content:"\03C4";} |
υ | greek small letter upsilon | p:before{content:"\03C5";} |
φ | greek small letter phi | p:before{content:"\03C6";} |
χ | greek small letter chi | p:before{content:"\03C7";} |
ψ | greek small letter psi | p:before{content:"\03C8";} |
ω | greek small letter omega | p:before{content:"\03C9";} |
ϑ | greek small letter theta symbol | p:before{content:"\03D1";} |
ϒ | greek upsilon with hook symbol | p:before{content:"\03D2";} |
ϖ | greek pi symbol | p:before{content:"\03D6";} |
en space | p:before{content:"\2002"} | |
em space | p:before{content:"\2003"} | |
thin space | p:before{content:"\2009"} | |
| zero width non-joiner | p:before{content:"\200C"} |
| zero width joiner | p:before{content:"\200D"} |
| left-to-right mark | p:before{content:"\200E"} |
| right-to-left mark | p:before{content:"\200F"} |
– | en dash | p:before{content:"\2013"} |
— | em dash | p:before{content:"\2014"} |
‘ | left single quotation mark | p:before{content:"\2018"} |
’ | right single quotation mark | p:before{content:"\2019"} |
‚ | single low-9 quotation mark | p:before{content:"\201A"} |
“ | left double quotation mark | p:before{content:"\201C"} |
” | right double quotation mark | p:before{content:"\201D"} |
„ | double low-9 quotation mark | p:before{content:"\201E"} |
† | dagger | p:before{content:"\2020"} |
‡ | double dagger | p:before{content:"\2021"} |
‰ | per mille sign | p:before{content:"\2030"} |
‹ | single left-pointing angle quotation mark | p:before{content:"\2039"} |
› | single right-pointing angle quotation mark | p:before{content:"\203A"} |
∞ | infinity | p:before{content:"\221E";} |
☎ | filled phone | p:before{content:"\260E";} |
☏ | blank phone | p:before{content:"\260F";} |
♻ | filled universal recycling symbol | p:before{content:"\267B";} |
♲ | blank universal recycling symbol | p:before{content:"\2672";} |
♼ | filled recycled paper symbol | p:before{content:"\267C";} |
♽ | blank recycled paper symbol | p:before{content:"\267D";} |
⚕ | staff of aesculapius | p:before{content:"\2695";} |
✎ | lower right pencil | p:before{content:"\270E";} |
✝ | cross | p:before{content:"\271D";} |
✡ | star of david | p:before{content:"\2721";} |
✭ | filled star | p:before{content:"\272D";} |
✩ | blank star | p:before{content:"\2729";} |