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;
}
<h2>content 속성 사용법 예시</h2>
<p>해당하는 CSS 가상 요소 선택자로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다.</p>
<ul>
    <li>::before</li>
    <li>::after</li>
    <li>::marker</li>
</ul>
실제 적용된 모습
selector {
    content: /* value */
}
<a href="https://example.com/">Example Domain</a>
a::after {
    content: " (" attr(href) ")";
}
실제 적용된 모습
<button type="button">좋아요!</button>
button::before {
    content: url(heart.jpg);
    margin-right: 0.5em;
}
실제 적용된 모습
<h3>소개</h3>
<h3>본문</h3>
<h3>결론</h3>
body {
    counter-reset: heading; /* counter 이름을 'heading'으로 지정합니다.
                               초깃값은 0입니다. */
}
h3::before {
  counter-increment: heading; /* heading의 카운터 값을 1씩 증가시킵니다. */
  content: counter(heading) /* heading의 카운터 값을 표시합니다. */
}
실제 적용된 모습
content 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
content 1 12 1 1

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