content 속성

content 속성을 사용하면 태그에 임의의 생성된 텍스트를 삽입할 수 있습니다. after 및 before 가상 요소와 함께 사용됩니다.

구문

선택자::after {
	content: '텍스트';
}

선택자::before {
	content: '텍스트';
}

li 태그 텍스트의 시작과 끝에 추가 텍스트를 삽입해 보겠습니다:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li::before {
	content: '!!!';
}
li::after {
	content: '???';
}

삽입된 텍스트에 다양한 스타일을 적용할 수 있습니다. 예를 들어, 이 텍스트를 어떤 색상으로 칠해 보겠습니다:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li::before {
	color: red;
	content: '!!!';
}
li::after {
	color: green;
	content: '???';
}