[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた

ul 要素などに指定できる list-style-type には種類に制限があるので
好きなリストマーカーを自由に設定できるように
::before擬似要素を使ってリストマーカー用のクラスを作ってみた。
css/list.css
もちろんテキストが複数行になってもインデントが揃っている。
サンプルページ：CSS list-marker sample page

.marker {
    display: block;
    padding-left: 1em;
}
.marker::before {
    content: "";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

::before擬似要素でブロック要素を生成して float: left; で要素の左に並べる。
要素を padding-left: 1em; で左に間を空けて margin-left: -1em; で左に戻す。
width: 1em; で text-align: center; を指定しておけば半角文字のマーカーが真ん中に来て良い感じになる。

::before という書き方は擬似クラスと擬似要素が多くなった CSS3 からの書き方なので
IE8 では対応してないので :before と書く必要がある。ちなみに IE6/7はサポートすらされていない。

上のクラスを指定しただけではリストマーカーは表示されないので以下のように指定する。
content には画像や属性値を指定することもできる。

.marker.type_disc::before {
    content: "・";
}
.marker.type_filled_circle::before {
    content: "●";
}
.marker.type_outline_circle::before {
    content: "○";
}
.marker.type_filled_square::before {
    content: "■";
}
.marker.type_outline_square::before {
    content: "□";
}
.marker.type_filled_diamond::before {
    content: "◆";
}
.marker.type_outline_diamond::before {
    content: "◇";
}
.marker.type_filled_star::before {
    content: "★";
}
.marker.type_outline_star::before {
    content: "☆";
}
.marker.type_filled_triangle::before {
    content: "▲";
}
.marker.type_outline_triangle::before {
    content: "△";
}
.marker.type_filled_inverted_triangle::before {
    content: "▼";
}
.marker.type_outline_inverted_triangle::before {
    content: "▽";
}