가상 요소 before
가상 요소 before는 요소 앞에 텍스트를
삽입합니다. 삽입할 텍스트를 지정하는 속성
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:hover::before {
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::before {
color: red;
content: '!!!';
}
:
같이 보기
-
태그 텍스트 뒤에 삽입하는 가상 요소
after -
태그 속성 값을 가져오는 함수
attr -
자동 번호 매기기를 설정하는 속성
counter-increment
