가상 요소 after

가상 요소 after는 요소 뒤에 텍스트를 삽입합니다. 삽입할 텍스트를 지정하는 속성 content와 함께만 사용됩니다.

문법

css선택자::after {
  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::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:hover::after {
  color: red;
  content: '!!!';
}

Результат:

함께 보기