CSSでチェックマークを文頭に付ける【ポイントは4つ】

こんにちは、mickです。

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

ブログをやっているといろいろ試してみたくなります。

今回は、CSSでチェックマークを文頭に付けてみます。

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

文頭（P要素）にチェックマークを付ける

チェックマークはリストにつけることが多いですがここでは、文章（P要素）の文頭にチェックマークを付けてみたいと思います。

サンプルプレビュー

チェックマークを文頭に付けてみた

コーディング

HTML部分

<p class="check-mark">チェックマークを文頭に付けてみた</p>

CSS部分

.check-mark {
	position: relative;
	padding-left: 3em;
	font-size: 20px;
	font-weight: bold;
}

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

ポイントは4つ

1. padding-leftでチェックマークのスペースを空ける
2. ::beforeの指定で文頭より前に作用させる
3. borderで疑似チェック作成
4. transformでの回転

.check-markのpadding-leftでチェックマークを描くスペースを空けます。
これをしないと、チェックマーク部分と文頭が重なります。

.check-mark::beforeの::beforeで文頭よりも前に作用するようにします。
これをしないと、文章そのものにコードが作用してしまいます。

例えば、transformでL字を回転させてチェックマークを擬似的に作りだしますが、::beforeを指定していないと文章そのものが回転します。

.check-mark::beforeのborderを使って擬似的にL字を作ります。
そしてtransformでこのL字を回転させてチェックマークが完成します。

まとめ。

参考にした書籍やWebで探してみるとよくリストのチェックマーク化として載っています。

それらを応用して、今回は文章（P要素）の文頭にチェックマークが来るようにしました。

以上、みなさまの助けなれば幸いです。

初稿 2020/07/13