スパン要素を使用せずに HTML リストの箇条書きの色を変更する方法

スパン要素を使用せずに HTML リストの箇条書きの色を変更する方法

特定のシナリオでは、リスト内の箇条書きの色を変更したい場合があります。

内に要素を追加しない HTML リストタグ。これは、スパンの使用を回避する独創的な解決策です。

これを実現するには、:before 疑似要素を利用します:

li {
  list-style: none;
}

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

このメソッドは、デフォルトの箇条書きスタイルを削除し、新しい箇条書きを作成します。経由:前。形状と色の点で柔軟性があり、IE8、Firefox、Chrome などの主要なブラウザーでサポートされています。

以上がスパン要素を使用せずに HTML リストの箇条書きの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。