content 속성의 이해

content 속성은
해당하는 CSS 가상 요소 선택자(::before, ::after, ::marker)로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다.
이러한 가상 요소 선택자로 생성하는 콘텐츠는 CSS 속성을 추가하여 스타일링할 수 있습니다.

content 속성을 적용할 수 있는 가상 요소 선택자는 제한적입니다.

이 세 가지 가상 요소 선택자에 적용할 수 있습니다.

하지만, 명세서에서는 content 속성을 적용할 수 있는 가상 요소 선택자를 특정하고 있지 않습니다.

예제

CSS 
h2::before {
    content: "😃 ";
    font-size: 0.8em;
    vertical-align: 0.1em;
}
h2::after {
    content: " 😃";
    font-size: 0.8em;
    vertical-align: 0.1em;
}
p::before {
    content: "« ";
}
p::after {
    content: " »"
}
li::marker {
    content: "♥ ";
    font-size: 0.7em;
}
웹 페이지에서 이모지(이모티콘) 사용하기
HTML 
<h2>content 속성 사용법 예시</h2>
<p>해당하는 CSS 가상 요소 선택자로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다.</p>
<ul>
    <li>::before</li>
    <li>::after</li>
    <li>::marker</li>
</ul>
실제 적용된 모습

content 속성의 형식은 다음과 같습니다.

구문

CSS 
selector {
    content: /* value */
}

정의

content 속성의 정의
초깃값 normal
적용 요소 CSS 가상 요소 선택자(::before, ::after, ::marker)로 생성하는 가상 요소
상속 아니오
애니메이션 아니오

값

content 속성의 값
normal 초깃값임.
기본값을 그대로 사용합니다.
하지만, ::before, ::after 가상 요소 선택자에서는 none 값으로 계산됩니다.
none 해당하는 가상 요소에 마치 display: none;이 있는 것처럼 가상 요소의 생성을 금지합니다.
"text" 콘텐츠를 따옴표로 지정한 텍스트(이모지 포함)로 설정합니다.
attr(attribute) 콘텐츠를 가상 요소 선택자의 attribute에 해당하는 값으로 사용합니다.
url(URL) 콘텐츠를 지정된 URL의 콘텐츠로 사용합니다.
counter(index) counter() 함수를 사용해서 콘텐츠를 지정된 index를 순번으로 하여 콘텐츠로 사용합니다.
open-quote 콘텐츠를 시작 인용문(예를 들어, ")으로 설정합니다.
close-quote 콘텐츠를 닫는 인용문(예를 들어, ")으로 설정합니다.

예시로 보는 값의 구현

content 속성의 헷갈릴 만한 값을 예시로 살펴보겠습니다.

attr(attribute)

콘텐츠를 가상 요소 선택자의 attribute에 해당하는 값으로 사용합니다. "text" 값과 같이 사용할 수도 있습니다.

HTML 
<a href="https://example.com/">Example Domain</a>
CSS 
a::after {
    content: " (" attr(href) ")";
}
실제 적용된 모습

위 코드 예시를 보면 href 속성의 값인 https://example.com/와 이 값의 앞에 텍스트 " ("와 ")"를 같이 값으로 사용했습니다. 텍스트와 함께 attr(attribute)를 같이 사용할 수 있습니다. 물론, attr(attribute)만을 사용할 수도 있습니다.

url(URL)

콘텐츠를 지정된 URL의 콘텐츠로 사용합니다.

HTML 
<button type="button">좋아요!</button>
CSS 
button::before {
    content: url(heart.jpg);
    margin-right: 0.5em;
}
실제 적용된 모습

여기에 사용된 URL은 heart.jpg를 사용해도 되고 "heart.jpg" 혹은 'heart.jpg'처럼 따옴표 내에 사용해도 됩니다.

counter(index)

콘텐츠를 지정된 index를 순번으로 하여 콘텐츠로 사용합니다.

이것은 CSS의 값의 하나인 counter() 함수를 사용하는 것입니다. counter() 함수의 사용법은 MDN - CSS 카운터 사용하기를 참조하세요.

HTML 
<h3>소개</h3>
<h3>본문</h3>
<h3>결론</h3>
CSS 
body {
    counter-reset: heading; /* counter 이름을 'heading'으로 지정합니다.
                               초깃값은 0입니다. */
}
h3::before {
  counter-increment: heading; /* heading의 카운터 값을 1씩 증가시킵니다. */
  content: counter(heading); /* heading의 카운터 값을 표시합니다. */
  margin-right: 0.2em;
}
실제 적용된 모습

웹 접근성 고려

가상 요소 선택자로 만들어진 가상 요소와 콘텐츠는 HTML 요소가 아닌 CSS로 생성되는 요소입니다. 따라서 이 요소는 화면에만 보이며, 실제 HTML 구조에는 포함되지 않습니다. 이 특성 때문에 가상 요소의 콘텐츠에 사용자에게 중요한 정보를 담는 것은 스크린 리더를 사용하는 장애인에게 웹 접근성을 방해할 수 있습니다. 웹 접근성을 고려할 때, 가상 요소를 사용할 때는 사용자에게 필요한 정보를 적절히 제공하는 것이 핵심입니다.

브라우저 호환성

content 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
content 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

content 속성의 명세서 사양
명세서 사양
content CSS Generated Content Module Level 3
#content-property

참고문헌

같이 보기