CSS - inline-block 指定時に黒丸マークを付ける方法

リスト作成時に、li要素に対して「display: inline-block」を指定した場合、

仕様として「list-style-type」の黒丸マークが消えてしまいます。

黒丸マークを復活させるにはどのようにすればいいのでしょうか？

リストに黒丸マークを付ける

次のようなサンプルHTML/CSSを用意します。

HTML

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

CSS

li {
	display: inline-block;
}

この時点では、黒丸マークは消えています。

疑似要素「li::before」を使う

黒マークを加えるためには、疑似要素「li::before」を使います。

CSSは次のようになります。

li {
	display: inline-block;
}

li::before {
	content: "\25cf\00A0\00A0\00A0";
	font-size: 5px;
	vertical-align: middle;
}

赤字の部分を付け加えました。これで黒丸マークが表示されます。

コード解説

content: "\25cf\00A0\00A0\00A0";

contentプロパティに指定している「\25cf」は「黒丸マーク」です。

「\00A0」は「半角スペース」です。

黒丸と文字の間隔を調整するために半角スペースを3つ入れています。半角スペースの数は好きなように調整してください。

font-size: 5px;

font-sizeで黒丸マークの大きさを調整しています。

デフォルトだと大きすぎるので、font-sizeは「5px」か「6px」あたりが妥当だと思います。 この値も自分の好きなように調整してください。

vertical-align: middle;

vartical-alignで縦方向の位置を中央にしています。

このように、疑似要素「li::before」を使うことで黒丸マークを復活せることができますし、 黒丸だけでなく、他のマークも表示させることができます。

まとめ

・li要素のdisplayプロパティにinline-blockを指定すると黒丸マークが消えます。

・マークを表示するには疑似要素「li::before」を使用します。

・contentプロパティの指定次第で、好きなマークを付けることができます。