リスト項目の内容に影響を与えずにリストの箇条書きの色を変更するにはどうすればよいですか?

リスト項目を変更せずにリストの箇条書きの色をカスタマイズする

HTML リストのスタイルの領域では、リストの箇条書きの外観を変更することが望ましいことがよくあります。 。箇条書きテキストを「span」または「p」タグ内にカプセル化する方法をとる人もいますが、そのような変更は制限的なものになる可能性があります。ここで疑問が生じます: リスト項目自体に影響を与えずに箇条書きの色を変換できるでしょうか?

幸いなことに、CSS の "li: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 などの主要なブラウザーで動作します。
• Unicode 箇条書きのカスタマイズ: Unicode に基づいてさまざまな箇条書きスタイルを使用できます。

たとえば、緑色の四角形の箇条書きを作成するには、「2022」を「25A0」に置き換えます。この方法には、古いバージョンの Internet Explorer との互換性がないなどの制限があることに注意してください。ただし、リスト項目の整合性を損なうことなく、リストの箇条書きの色をカスタマイズするための堅牢かつ柔軟な方法を提供します。

以上がリスト項目の内容に影響を与えずにリストの箇条書きの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。