左坊のメモ帳

WordPress など

*

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

      2018/08/20

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{
	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;
}

WordPressでCSSをカスタマイズする2つの方法

CSSでレスポンシブなtableのborder(枠)を角丸にする方法

 - CSS・html, WordPress