左坊のメモ帳

WordPress など

*

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

      2018/10/12

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

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

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

スポンサーリンク

チェックマークと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;
}

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

シンプルなチェックマーク
チェックが飛び出るチェックマーク
チェックボックスが四角ではなくて丸のチェックマーク
丸枠で飛び出るチェックマーク
チェックボックスが角丸のチェックマーク
角丸枠で飛び出るチェックマーク
チェックボックスがひし形のチェックマーク
ひし形枠で飛び出るチェックマーク

下の記事にコードサンプルあります。

 - CSS・html, WordPress