どうも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制作のちょいテク詰め合わせ
↧