방법 - 목록의 글머리 기호 색상 변경
CSS로 목록의 글머리 기호 색상을 변경하는 방법을 알아보세요.
글머리 기호 색상 변경
- 아델
- 아그네스
- 곤봉
- 단발
1단계) HTML 추가:
기본 목록 만들기:
예시
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
2단계) CSS 추가:
기본적으로 목록 항목의 글머리 기호 색상은 변경할 수 없습니다. 그러나 이를 가능하게 하기 위해 몇 가지 CSS 트릭을 수행할 수 있습니다. CSS 프레임워크 또는 특수 스타일시트를 사용하는 경우 약간 다르게 조정해야 할 수도 있습니다.
예시
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}