가상 요소 after
가상 요소 after는 요소 뒤에
텍스트를 삽입합니다. 삽입할 텍스트를 지정하는
속성 content와
함께만 사용됩니다.
문법
선택자::after {
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:hover::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:hover::after {
color: red;
content: '!!!';
}
:
함께 보기
-
태그 텍스트 앞에 삽입하는 가상 요소
before -
태그 속성의 값을 얻는 함수
attr -
자동 번호 매기기를 설정하는 속성
counter-increment
