【つくってみた】 css3で丸に数字

こういうやつです。

なんてタイトルがぴったりなのか分かりませんでした...。


数字は普通にpタグで書きました。

.sample {

position: relative;

color: #fff;

}

.sample:before {
　content: "";
　display: block;
　position: absolute;
　top: 1px;
　left: -4px; 
　width: 20px;
　height: 20px;
　border-radius: 20px;
　background-color: blue;
　z-index: -1;

}

青い部分は適当に調整しちゃっていいかと思われます。

もっとスマートな書き方知ってる方は教えて下さい！