[CSS] ol要素の番号部分をデザインするテクニック

counter-increment、counter-reset、content、擬似要素を使用してol要素の番号部分をデザインする方法です。元々のデフォルトで付与される番号を消して、counter-incrementプロパティで新たに番号をつけています。これによりol要素以外の要素でも連番をつける事が可能です。※ie7以下は対応していません。

基本設定

HTML

任意のテキスト
任意のテキスト
任意のテキスト

シンプルバージョン

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.
2. Duis suscipit, enim vitae lacinia luctus, orci libero adipiscing nisl, sed ornare diam ante non est. Suspendisse in cursus tellus. Maecenas accumsan velit vitae tellus pretium feugiat.
3. Quisque non vulputate tellus. Vivamus id aliquam enim. Duis vitae pretium leo. Donec ut accumsan odio, nec lobortis mauris. Sed sed nisl ipsum. In vehicula diam bibendum, porttitor est semper, tincidunt nulla.

CSS

.ol_style {
 counter-reset: li;
 list-style: none;
 padding-left: 0;
}
.ol_style > li {
 position: relative;
 margin-bottom: .5em;
 padding-left: 2.5em;
}
.ol_style > li:before {
 content: counter(li) "";
 counter-increment: li;
 position: absolute;
 left: 0;
 width: 1.8em;
 height: 1.8em;
 background: #000;
 border-radius: 50px;
 color: #fff;
 line-height: 1.8;
 text-align: center;
}

番号に別途スタイルした固定の要素を加える場合

1. ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
2. いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
3. うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう

CSS

.ol_style {
 counter-reset: li;
 list-style: none;
 padding-left: 0;
}
.ol_style > li {
 position: relative;
 margin-bottom: .5em;
 padding-left: 3em;
}
.ol_style > li:before {
 content: counter(li) "";
 counter-increment: li;
 position: absolute;
 left: 0;
 width: 1.5em;
 text-align: right;
}
/*番号とスタイルを分けるため*/
.ol_style > li:after {
 content: "位";
 position: absolute;
 top: .35em;
 left: 2em;
 font-size:12px;
}

• CSS Generated content
• CSS 2.1 selectors
• CSS Counters