아무래도 7note입니다. 목록 표시의 색상을 변경하는 방법

<ul> 또는 <ol> 등의 <li> 에 사용되는 리스트 마크나 숫자의 색을 변경하는 방법.
디폴트의 ​​리스트 마크에서는 색을 바꿀 수 없다 (정확하게는 텍스트의 색과 함께 되기 때문에 바꾸기 어렵다) 때문에, 의사 요소를 사용해 재현합니다.

출처

index.html

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ol>

style.css

ul li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ul li::before {
  content: "・";           /* リストマークのかわりを */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}

ol {
  counter-reset: item;    /* 疑似要素で数字を使うときに指定 */
}
ol li {
  list-style-type: none;  /* デフォルトのリストマークを非表示にする */
  position: relative;     /* 基準位置とする */
}
ol li::before {
  counter-increment: item;    /* 疑似要素で数字を使うときに指定 */
  content: counter(item)'.';  /* 疑似要素で数字を使うときに指定 */
  color: #f00;            /* 文字を赤色に指定 */
  position: absolute;     /* 相対位置に指定 */
  left: -1em;             /* 左に1文字分ずらした位置に配置 */
  top: 0;                 /* 上から0pxのいちに指定 */
}

해설

리스트 마크의 색을 변경하는 방법으로서, span과 사용한 방법도 있습니다만, 그 방법으로는 매회 span을 잡지 않으면 안 되어 버리므로, 그다지 현실적인 방법은 아닙니다.

그래서 의사 요소에 리스트 마크의 대체가 되는 점(·)이나 숫자를 content로 지정합니다.

표시 위치는 position 지정을 행하고, 왼쪽에 1 문자문 어긋난 위치에 배치합니다.

요약

CSS의 디폴트는 꽤 제약이 붙어 있는 것도 많기 때문에, 그러한 때에는 의사 요소가 매우 활약합니다.
다만, 의사 요소로 설정하고 있는 것은 커서로 선택하거나 텍스트를 카피할 수 없으므로 주의해 주세요.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임