Properties

Properties

Editing
  • account_tree
  • bug_report

content

가상 요소로 생성할 콘텐츠를 설정한다.

사용 가능한 값 타입

〈'content'〉

  • normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?

사용되는 키워드

  • none

    요소에서는 요소의 자식으로 렌더링되지 않는다. 가상 요소에서는 마치 display: none이 지정된 것 처럼 가상 요소 생성을 금지한다. 어떤 경우에도 요소 또는 가상 요소를 원래 요소로 갖는 가상 요소가 생성되는 것을 방지하지 않는다.

  • normal

    요소 또는 페이지의 margin box의 경우 콘텐츠로 처리한다. ::befoer, ::after의 경우 없음으로 처리한다. ::marker, ::placeholder, ::file-selector-button의 경우 자체적으로 처리된다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈content-list〉

    • [ <string> | contents | <image> | <counter> | <quote> | <target> | <leader> ]+
  • 〈content-replacement〉

    지정된 <image> 타입으로 채워진 요소 또는 가상 요소를 대체 요소로 생성한다. 지정된 <image> 타입의 값이 유효하지 않은 이미지를 나타내는 경우 투명한 검정색으로 채워진 자연적인 너비와 높이가 0인 이미지를 나타내는 것으로 처리된다.

    • 〈image〉
  • 〈counter〉

    순번 매김같은 값을 문자열이나 이미지로 나타내는 counter() 및 counters() 함수를 통해 생성된 값을 나타낸다.

    • <counter()> | <counters()>
  • 〈string〉

    따옴표로 감싸진 데이터 유형을 표현한다.

    • "this is a 'string'."

관련 함수들

  • attr()

    선택자의 속성 값을 반환해준다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈quote〉normalCSS2.1

    가상 요소가 지정된 경우 가상 요소를 제거한다.

  • 〈quote〉noneCSS2.1

    가상 요소를 설정하지 않는다.

  • 〈quote〉contentCSS2.1

    가상 요소로 사용하고자 하는 콘텐츠를 텍스트로 설정한다. TAG는 사용할 수 없다.

  • 〈quote〉url()CSS2.1

    이미지를 가상 요소로 생성한다.

  • 〈quote〉attr()CSS2.1

    가상 요소를 추가하고자 하는 요소의 속성(Attribute)의 값을 이용하여 가상 요소로 생성한다.

  • 〈quote〉counter()CSS2.1

    번호를 매기는 값으로 가상 요소를 생성한다.

  • 〈quote〉open-quoteCSS2.1

    여는 인용부호(따옴표)를 가상 요소로 생성한다.

  • 〈quote〉close-quoteCSS2.1

    닫는 인용부호(따옴표)를 가상 요소로 생성한다.

  • 〈quote〉no-open-quoteCSS2.1

    생성된 여는 인용부호(따옴표) 가상 요소를 제거한다.

  • 〈quote〉no-close-quoteCSS2.1

    생성된 닫는 인용부호(따옴표) 가상 요소를 제거한다.

구문

  • content 〈string〉;CSS2.1

    따옴표로 감싼 문자열을 가상 요소로 설정한다.

    텍스트로 가상 요소를 생성한다.
  • content 〈string〉;CSS2.1

    특수 문자 코드를 따옴표로 문자열로 지정하되 앞에 역슬래시를 두어야 한다.

    특수 문자 코드를 사용하여 가상 요소를 생성한다.
  • content attr(href);CSS2.1
    가상 요소를 삽입할 요소의 속성 값을 가상 요소로 생성한다.
  • content 〈image〉;CSS2.1
    특수 문자 코드를 사용하여 가상 요소를 생성한다.
  • content 〈counter〉;CSS2.1
    일련 번호를 가상 요소를 생성한다.
  • content 〈quote〉;CSS2.1
    따옴표를 가상 요소를 생성한다.

버전 명세

Modules
Module NameStatusSummary
CSS Generated Content Module Level 3

Last review date: 2022-6-14

기술 문서

Special Characters

다음 아래는 CSS에서 가상 요소로 사용할 수 있는 특수문자중 일부이다. 

SymbolDescriptionCSS Example
"quotation markp:before{content:"\0022";}
&ampersandp:before{content:"\0026";}
<less-than signp:before{content:"\003c";}
>greater-than signp:before{content:"\003e";}
 no-break spacep:before{content:"\00a0";}
¡inverted exclamation markp:before{content:"\00a1";}
¢cent signp:before{content:"\00a2";}
£pound sterling signp:before{content:"\00a3";}
¤general currency signp:before{content:"\00a4";}
¥yen signp:before{content:"\00a5";}
euro signp:before{content:"\20AC";}
¦broken (vertical) barp:before{content:"\00a6";}
§section signp:before{content:"\00a7";}
¨umlaut (dieresis)p:before{content:"\00a8";}
©copyright signp:before{content:"\00A9";}
trademark signp:before{content:"\2122";}
ªordinal indicator, femininep:before{content:"\00aa";}
«angle quotation mark, leftp:before{content:"\00ab";}
¬not signp:before{content:"\00ac";}
­soft hyphenp:before{content:"\00ad";}
®registered signp:before{content:"\00ae";}
¯macronp:before{content:"\00af";}
°degree signp:before{content:"\00b0";}
degree celsius signp:before{content:"\2103";}
degree fahrenheit signp:before{content:"\2109";}
±plus-or-minus signp:before{content:"\00b1";}
²superscript twop:before{content:"\00b2";}
³superscript threep:before{content:"\00b3";}
´acute accentp:before{content:"\00b4";}
µmicro signp:before{content:"\00b5";}
pilcrow (paragraph sign)p:before{content:"\00b6";}
·middle dotp:before{content:"\00b7";}
¸cedillap:before{content:"\00b8";}
¹superscript onep:before{content:"\00b9";}
ºordinal indicator, masculinep:before{content:"\00ba";}
»angle quotation mark, rightp:before{content:"\00bb";}
¼fraction one-quarterp:before{content:"\00bc";}
½fraction one-halfp:before{content:"\00bd";}
¾fraction three-quartersp:before{content:"\00be";}
¿inverted question markp:before{content:"\00bf";}
Àcapital A, grave accentp:before{content:"\00c0";}
Ácapital A, acute accentp:before{content:"\00c1";}
Âcapital A, circumflex accentp:before{content:"\00c2";}
Ãcapital A, tildep:before{content:"\00c3";}
Äcapital A, dieresis or umlaut markp:before{content:"\00c4";}
Åcapital A, ringp:before{content:"\00c5";}
Æcapital AE diphthong (ligature)p:before{content:"\00c6";}
Çcapital C, cedillap:before{content:"\00c7";}
Ècapital E, grave accentp:before{content:"\00c8";}
Écapital E, acute accentp:before{content:"\00c9";}
Êcapital E, circumflex accentp:before{content:"\00ca";}
Ëcapital E, dieresis or umlaut markp:before{content:"\00cb";}
Ìcapital I, grave accentp:before{content:"\00cc";}
Ícapital I, acute accentp:before{content:"\00cd";}
Îcapital I, circumflex accentp:before{content:"\00ce";}
Ïcapital I, dieresis or umlaut markp:before{content:"\00cf";}
Ðcapital Eth, Icelandicp:before{content:"\00d0";}
Ñcapital N, tildep:before{content:"\00d1";}
Òcapital O, grave accentp:before{content:"\00d2";}
Ócapital O, acute accentp:before{content:"\00d3";}
Ôcapital O, circumflex accentp:before{content:"\00d4";}
Õcapital O, tildep:before{content:"\00d5";}
Öcapital O, dieresis or umlaut markp:before{content:"\00d6";}
×multiply signp:before{content:"\00d7";}
Øcapital O, slashp:before{content:"\00d8";}
Ùcapital U, grave accentp:before{content:"\00d9";}
Úcapital U, acute accentp:before{content:"\00da";}
Ûcapital U, circumflex accentp:before{content:"\00db";}
Ücapital U, dieresis or umlaut markp:before{content:"\00dc";}
Ýcapital Y, acute accentp:before{content:"\00dd";}
Þcapital THORN, Icelandicp:before{content:"\00de";}
ßsmall sharp s, German (sz ligature)p:before{content:"\00df";}
àsmall a, grave accentp:before{content:"\00e0";}
ásmall a, acute accentp:before{content:"\00e1";}
âsmall a, circumflex accentp:before{content:"\00e2";}
ãsmall a, tildep:before{content:"\00e3";}
äsmall a, dieresis or umlaut markp:before{content:"\00e4";}
åsmall a, ringp:before{content:"\00e5";}
æsmall ae diphthong (ligature)p:before{content:"\00e6";}
çsmall c, cedillap:before{content:"\00e7";}
èsmall e, grave accentp:before{content:"\00e8";}
ésmall e, acute accentp:before{content:"\00e9";}
êsmall e, circumflex accentp:before{content:"\00ea";}
ësmall e, dieresis or umlaut markp:before{content:"\00eb";}
ìsmall i, grave accentp:before{content:"\00ec";}
ísmall i, acute accentp:before{content:"\00ed";}
îsmall i, circumflex accentp:before{content:"\00ee";}
ïsmall i, dieresis or umlaut markp:before{content:"\00ef";}
ðsmall eth, Icelandicp:before{content:"\00f0";}
ñsmall n, tildep:before{content:"\00f1";}
òsmall o, grave accentp:before{content:"\00f2";}
ósmall o, acute accentp:before{content:"\00f3";}
ôsmall o, circumflex accentp:before{content:"\00f4";}
õsmall o, tildep:before{content:"\00f5";}
ösmall o, dieresis or umlaut markp:before{content:"\00f6";}
÷divide signp:before{content:"\00f7";}
øsmall o, slashp:before{content:"\00f8";}
ùsmall u, grave accentp:before{content:"\00f9";}
úsmall u, acute accentp:before{content:"\00fa";}
ûsmall u, circumflex accentp:before{content:"\00fb";}
üsmall u, dieresis or umlaut markp:before{content:"\00fc";}
ýsmall y, acute accentp:before{content:"\00fd";}
þsmall thorn, Icelandicp:before{content:"\00fe";}
ÿsmall y, dieresis or umlaut markp:before{content:"\00ff";}
Œlatin capital ligature oep:before{content:"\0152";}
œlatin small ligature oep:before{content:"\0153";}
Šlatin capital letter s with caronp:before{content:"\0160";}
šlatin small letter s with caronp:before{content:"\0161";}
Ÿlatin capital letter y with diaeresisp:before{content:"\0178";}
ƒlatin small f with hook or functionp:before{content:"\0192";}
ˆmodifier letter circumflex accentp:before{content:"\02c6";}
˜small tildep:before{content:"\02dc";}
Αgreek capital letter alphap:before{content:"\0391";}
Βgreek capital letter betap:before{content:"\0392";}
Γgreek capital letter gammap:before{content:"\0393";}
Δgreek capital letter deltap:before{content:"\0394";}
Εgreek capital letter epsilonp:before{content:"\0395";}
Ζgreek capital letter zetap:before{content:"\0396";}
Ηgreek capital letter etap:before{content:"\0397";}
Θgreek capital letter thetap:before{content:"\0398";}
Ιgreek capital letter iotap:before{content:"\0399";}
Κgreek capital letter kappap:before{content:"\039a";}
Λgreek capital letter lambdap:before{content:"\039b";}
Μgreek capital letter mup:before{content:"\039c";}
Νgreek capital letter nup:before{content:"\039d";}
Ξgreek capital letter xip:before{content:"\039e";}
Οgreek capital letter omicronp:before{content:"\039f";}
Πgreek capital letter pip:before{content:"\03a0";}
Ρgreek capital letter rhop:before{content:"\03a1";}
Σgreek capital letter sigmap:before{content:"\03a3";}
Τgreek capital letter taup:before{content:"\03a4";}
Υgreek capital letter upsilonp:before{content:"\03a5";}
Φgreek capital letter phip:before{content:"\03a6";}
Χgreek capital letter chip:before{content:"\03a7";}
Ψgreek capital letter psip:before{content:"\03a8";}
Ωgreek capital letter omegap:before{content:"\03a9";}
αgreek small letter alphap:before{content:"\03b1";}
βgreek small letter betap:before{content:"\03b2";}
γgreek small letter gammap:before{content:"\03b3";}
δgreek small letter deltap:before{content:"\03b4";}
εgreek small letter epsilonp:before{content:"\03b5";}
ζgreek small letter zetap:before{content:"\03b6";}
ηgreek small letter etap:before{content:"\03b7";}
θgreek small letter thetap:before{content:"\03b8";}
ιgreek small letter iotap:before{content:"\03b9";}
κgreek small letter kappap:before{content:"\03ba";}
λgreek small letter lambdap:before{content:"\03bb";}
μgreek small letter mup:before{content:"\03bc";}
νgreek small letter nup:before{content:"\03bd";}
ξgreek small letter xip:before{content:"\03be";}
οgreek small letter omicronp:before{content:"\03bf";}
πgreek small letter pip:before{content:"\03c0";}
ρgreek small letter rhop:before{content:"\03c1";}
ςgreek small letter final sigmap:before{content:"\03C2";}
σgreek small letter sigmap:before{content:"\03C3";}
τgreek small letter taup:before{content:"\03C4";}
υgreek small letter upsilonp:before{content:"\03C5";}
φgreek small letter phip:before{content:"\03C6";}
χgreek small letter chip:before{content:"\03C7";}
ψgreek small letter psip:before{content:"\03C8";}
ωgreek small letter omegap:before{content:"\03C9";}
ϑgreek small letter theta symbolp:before{content:"\03D1";}
ϒgreek upsilon with hook symbolp:before{content:"\03D2";}
ϖgreek pi symbolp:before{content:"\03D6";}
en spacep:before{content:"\2002"}
em spacep:before{content:"\2003"}
thin spacep:before{content:"\2009"}
zero width non-joinerp:before{content:"\200C"}
zero width joinerp:before{content:"\200D"}
left-to-right markp:before{content:"\200E"}
right-to-left markp:before{content:"\200F"}
en dashp:before{content:"\2013"}
em dashp:before{content:"\2014"}
left single quotation markp:before{content:"\2018"}
right single quotation markp:before{content:"\2019"}
single low-9 quotation markp:before{content:"\201A"}
left double quotation markp:before{content:"\201C"}
right double quotation markp:before{content:"\201D"}
double low-9 quotation markp:before{content:"\201E"}
daggerp:before{content:"\2020"}
double daggerp:before{content:"\2021"}
per mille signp:before{content:"\2030"}
single left-pointing angle quotation markp:before{content:"\2039"}
single right-pointing angle quotation markp:before{content:"\203A"}
infinityp:before{content:"\221E";}
filled phonep:before{content:"\260E";}
blank phonep:before{content:"\260F";}
filled universal recycling symbolp:before{content:"\267B";}
blank universal recycling symbolp:before{content:"\2672";}
filled recycled paper symbolp:before{content:"\267C";}
blank recycled paper symbolp:before{content:"\267D";}
staff of aesculapiusp:before{content:"\2695";}
lower right pencilp:before{content:"\270E";}
crossp:before{content:"\271D";}
star of davidp:before{content:"\2721";}
filled starp:before{content:"\272D";}
blank starp:before{content:"\2729";}

지원 웹브라우저