[CSS]OLリストの数字の前に色をぬる

タイトルではわかりづらいですが
要は下図みたいなことをCSSでやってみたってことです。

画像で再現しても良かったのですが
「CSSで」っていう前提があったので
なんとか実装してみました。
(もっとスマートなやり方がアリそうですが)

HTML側(抜粋)

<ol class="list">
	<li><p>テスト<br />テスト</p></li>
	<li><p>テストテストテストテストテストテストテストテストテスト</p></li>
	<li><p>テスト</p></li>
	<li><p>テスト</p></li>
	<li><p>テスト</p></li>
</ol>

CSS側

# No.01
ol.list {
	list-style-type: none;
	counter-reset: list_counter;
}
# No.02
ol.list li {
	line-height: 30px;
	width: 100px;
}
ol.list li:before {
	background: blue;
	width: 10px;
	display: block;
	content: " ";
	float: left;
	height: 30px;
}
ol.list li p {
	background-color: white;
	padding-left: 2em;
	text-indent: -1.2em;
}
# No.03
ol.list li p:before {
	counter-increment: list_counter;
	content: counter( list_counter ) ". ";
}