【いちばん簡単】liタグの点や数字だけ色を変更する(擬似要素::markerを使用)

liタグに付く、点や数字の部分だけ色を変える方法です。

ネット上の記事にはよく「デフォルトの点をlist-style: none;で消してbefore擬似要素で〜」と載っていますが、そちらより簡単にできてCSSの記述もずっと少ない方法の紹介です。

サンプル

liタグにデフォルトで付いている点や数字は::markerという擬似要素です。

実際に見てみましょう。下記は何もCSSを指定していないulのリストです。

こちらをデベロッパーツールで覗くと

ulリストの構造

こうなっています。

::markerという擬似要素がありました。これが黒点の正体です。

変更したい(CSSを当てたい)対象が見つかったわけですから、あとは簡単ですね。

例えばこのように記述します。

するとこのように、点が赤く変更できます。

対応ブラウザはこちらを参照ください
Can I use
IEは非対応です。

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥

Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。

決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。

当事務所で導入しているのがSquare（スクエア）。

導入は無料で、コストはクレジット決済手数料（3%台）のみ。

毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。

制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。

非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。