content 속성

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

구문

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

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

예제

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

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

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

Результат:

예제

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

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

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

Результат:

같이 보기