CSSでチェックマークをリストに付ける【ポイントは4つ＋2】

こんにちは、mickです。

プログラマ系SEとしてIT企業で11年勤務。

HTMLではリストで表現できる中にチェックマークがありません。

CSSを使うことでチェックマークをつけることができます。

2020/11/28追記
ファビコンを使ってチェックマークをリストに付ける記事を書きました。
⇒ CSSでチェックマークをリストに付ける方法【ファビコン版】

リストにチェックマークをつける
- サンプルプレビュー
コーディング
まとめ。順を追ってコーディングする

リストにチェックマークをつける

リストにチェックマークを付けてみたいと思います。

サンプルプレビュー

リストのチェックマーク
リストのチェックマーク
リストのチェックマーク

コーディング

HTML部分

<ul class="check-list">
   <li>リストのチェックマーク</li>
   <li>リストのチェックマーク</li>
   <li>リストのチェックマーク</li>
</ul>

CSS部分

.check-list {
	list-style: none;
	padding: 0;
}

.check-list li{
	position: relative;
	padding-left: 3em;
}

.check-list li::before{
	content:'';
	width: 1em;
	height: 0.6em;
	border-top-width: 0;
	border-right-width: 0;
	border-left: 3px solid #4169e1;
	border-bottom: 3px solid #4169e1;
	position: absolute;
	top: 50%;
	left: 0.8em;
	-webkit-transform: translateY(-80%) rotate(-45deg);
	transform: translateY(-80%) rotate(-45deg);
}