CSS3のみでチェックマークのアイコンを作る[CSS]

ネタ元は、Webitectからですが、リストを用いたCSS3のみでチェックマークのアイコン作成方法の紹介です。

マークアップはごくごく普通のリストですので、HTML

HTML

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

CSSのソースコードは以下のようになっています。アイコンの位置は、absoluteを用いるので、relativeを指定します。

CSS

body:nth-of-type(1) ul li{
	list-style-type:none;
	padding: 0 0 0 45px;
	position:relative;
}
body:nth-of-type(1) ul li:before{
	content:"\00a0";
	display: block;
	border: solid 9px #000;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	height: 0;
	width: 0;
	position: absolute;
	left: 7px;
	top: 40%;
	margin-top: -8px;
}

body:nth-of-type(1) ul li:after{
	content:"\00a0";
	display:block;
	width: 3px;
	height: 6px; 
	border: solid #fff;
	border-width: 0 2px 2px 0;
	position:absolute;
	left: 14px;
	top: 40%;
	margin-top: -4px;  
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

デモ

キャプチャ画像ですが、以下のようにCSS3がサポートされているブラウザでは表示されます。