가상 요소 before

가상 요소 before는 요소 앞에 텍스트를 삽입합니다. 삽입할 텍스트를 지정하는 속성 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:hover::before {
  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:hover::before {
  color: red;
  content: '!!!';
}

Результат:

같이 보기