経緯

・きっかけは、このサイトだった
・へー、CSSでこんなこと出来るのか
・だったら、やってみよう
・割と簡単に考えていた
・5分くらいあれば出来ると思っていた
・甘かった

---

うまく設置できない場所がある
・普通の場所だと表示されるのだが、ちょっとフロートかましてるとこだと、どうしてもうまくいかない
・どうやら、下記辺りが影響しているらしい

.rounded-list a{

	position: relative;

}

.rounded-list a:before{

	position: absolute;

}	

・しょうがないので、「absolute」かましてないサンプルを探したけど、これがびっくりするぐらい見つからない
・上記のようなサンプルがゴロゴロしてるんだ、と思ったのは勘違いで、たまたま見つけた最初の1件がどうやら最も素晴らしいデモみたい
・後は、定例処理か、せいぜい画像に置き換えるぐらい

---

olタグ数字の装飾
・結局、自分がやりたいのは「olタグ数字の装飾」ということに気が付き、メゲズに検索し続けていたら、同じ疑問を持った人を発見

---

擬似要素 li:before
ここで、ようやくこの書き方の重要性に気が付く

li:before {

  content: counters(li);

  counter-increment: li;

・counter-increment CSS 生成内容

・やっと見つけたこのサンプルもabsolute利用

li:before {

    position:absolute;

・次に見つけたこのサンプルは、数字に背景色付いてないけど、でも、「absolute」使ってない！
・よっしゃいける！
・と思い試すも、やっぱり、フロート部分の微調整が効かない
・relativeの影響？

ol > li:before {

    position: relative;

・ここで、ようやく、リストではなく、設置するフロート部分がおかしいんちゃうの？ ていうことに気が付く