リストのマーカーの色を変更、dt要素にマーカーを付けたり、注釈などのリストスタイル【CSS】

リストのスタイルについてちょこっとしたスタイルのメモです。

マーカーだけ色変える

これまで全くもってこういう要件はなかったのですが、最近あったのでメモ。結局はspan要素をいれなければならないので、マーカーだけ色変えるという要件はちょっと....

HTML

<ul class="list-A01">
<li><span>リスト</span></li>
</ul>

CSS

.list-A01 li {
	color: #A28D4E;
}

.list-A01 span {
	color: #000;
}

dtにマーカーをいれる

マーカーをつけるには、list-styleプロパティを使えばいいわけですが、list-styleはリスト要素しか有効でないので、リスト要素以外に指定しても何も起こりません。なので、リスト要素になるようにdisplayプロパティでlist-itemにしてしまえばいいわけです。

HTML

リスト
リストのディスクリプション

CSS

dt {
	display: list-item;
	list-style: disc outside;
}

注釈みたいな

beforeとか使えれば、それでいいんですけど、某IEさんが対応していないので、HTMLも下記のような感じです。CSSで_left: -5%;としていますが、rightプロパティが実装されていない某6さん向けです。

HTML

  • 注釈です。

CSS

ul {
	list-style-type: none;
}

li {
	position: relative;
	margin: 0 0 0 40px;
	margin-top: 10px;
}
.marker {
	position: absolute;
	top: 0;
	right: 100%;
	_left: -5%;
	width: 2.5em;
}