1. ホーム
  2. html

[解決済み] CSS の list-item の箇条書きのための Unicode 文字

2022-08-24 16:28:30

質問

リストアイテムの箇条書きに星印(★)を使いたいのですが、どうすればいいですか?

私は CSS3 モジュールを読みました。リスト を読みましたが、カスタムテキストを箇条書きにする方法は説明されています。私が思うに、ブラウザが単に ::marker 擬似要素に対応していないだけだと思います。

画像を使わずに、どうすればいいのでしょうか?

どのように解決するのですか?

編集

私はもう画像を使うことをお勧めしません。私なら、このようにユニコード文字を使用するアプローチにこだわりますね。

li:before {
  content: "\2605";
}

旧解答

私なら画像背景を選ぶと思います。 効率的です。 汎用性があり、クロスブラウザにやさしいからです。

以下はその例です。

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>