` または ` タグを使用せずに HTML リストの箇条書きに色を付けることはできますか?

HTML リストの箇条書きをスパンなしで色付けする

質問:

HTML リストの箇条書きの色は、スパンなしで変更できますか? のような要素を追加します。または 内でタグ?

答え:

はい、li:before 疑似要素を使用してこれを実現できます:

li {
  list-style: none;
}

li:before {
  /* Use 22 for a round bullet */
  /* Use A0 for a square bullet */
  content: '22';
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

• foo
• bar

この手法では、

内に追加のマークアップを必要としません。要素。ただし、次のような制限があります。

• サポートされるブラウザ: IE8 以降、Firefox、Chrome
• 箇条書きスタイルは Unicode 文字に制限されます

以上が` または ` タグを使用せずに HTML リストの箇条書きに色を付けることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。