CSS를 사용하면 목록의 글머리 기호(불릿)만 텍스트와 다른 색상으로 바꿀 수 있습니다. 핵심은 ::before 가상 요소를 활용하는 것입니다.
기본 불릿 대신 list-style: none;으로 기본 스타일을 제거한 뒤, li::before에 유니코드 문자 \2022(•)를 삽입하고 원하는 색상을 지정하면 됩니다. 이렇게 하면 텍스트 색상은 그대로 유지하면서 불릿의 색상만 자유롭게 변경할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style: none;
}
ul li {
font-size: 20px;
font-weight: 500;
}
ul li::before {
content: "\2022";
color: rgb(86, 18, 117);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
</style>
</head>
<body>
<h1>목록 불릿 색상 변경 예제</h1>
<ul>
<li>낙타</li>
<li>염소</li>
<li>기린</li>
<li>사자</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 보라색 계열(rgb(86, 18, 117))의 굵은 불릿이 각 목록 항목 앞에 표시됩니다.
코드 설명
각 속성이 하는 역할은 다음과 같습니다.
content: "\2022"; — 유니코드 문자 U+2022(•)를 불릿으로 삽입합니다.
color: — 불릿의 색상을 지정합니다. 여기서는 보라색 계열이 적용되었습니다.
display: inline-block; — 불릿을 인라인 블록 요소로 만들어 너비와 여백 조절이 가능하게 합니다.
width: 1em; — 불릿과 텍스트 사이의 간격을 일정하게 유지합니다.
margin-left: -1em; — 기본 들여쓰기를 상쇄하여 불릿 위치를 자연스럽게 맞춥니다.
이 방법의 장점은 별도의 이미지나 추가 마크업 없이 순수 CSS만으로 불릿 색상, 크기, 모양을 모두 제어할 수 있다는 점입니다. 원하는 모양에 따라 \2022 대신 다른 유니코드 문자나 이모지를 사용할 수도 있습니다.