WordPressでシンプルなチェックマークを表示するCSS

WordPressで赤字のシンプルなチェックマークを表示する

WordPressでチェックマークを普通に記述すると、青っぽいチェックマークになります。

☑

もっとシンプルな線だけのチェックマークのCSSです。
[adsense]

1 チェックマークとCSS
2 その他の、シンプルなチェックマークサンプル

チェックマークとCSS

表示例

シンプルな
線だけの
チェックマークです。

htmlソース

<span class="checkmark">シンプルな</span>
<span class="checkmark">線だけの</span>
<span class="checkmark">チェックマークです。</span>

cssコード

.checkmark{
	padding-left:24px;
	position:relative;
}

.checkmark:before,
.checkmark:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark:before{
	width:16px;
	height:16px;
	background:#ffffff;
	border:1px solid #ff0000;
	left:0;top:2px;
}
.checkmark:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:7px;
}