くりすたる・の〜と

とりあえずメモとかしてみた。

CSSで「LI」要素の先頭マークを好きな文字にする方法

2016.03.09(2016.03.09)

CSSを使ってリスト要素のマークの種類を「●」「■」以外に変える方法、なのです。今回使った『:before』の方法は、リスト要素以外にもいろいろ応用がきくので、ぜひマスターしたいのです。

li要素のマーク

LI要素のマークは、普通に指定すると「●」「○」「■」位しかないのです。好きな画像を使うこともできますが、これを好きな文字にしたいよ、という話なのです。

分かればものすごく簡単なのですが、けっこう失敗もしたので、それをメモしておくのです。

方法

ul li:before{
content: "★";
}

:beforeは、『【要素の前】に適用したいのですよ』...ということを指定する魔法なのです。で、contentの中に好きな文字を入れれば、要素の前にその文字が表示されるのです。実に簡単で便利なのです。今回は『ul li』に使いましたが、実は、『h1』等の他の要素にも使えたりもします。

失敗例

以下、【失敗例】を書いておきます。



くりすたる・の〜と