CSS を使用して HTML リストの箇条書きの色をカスタマイズするにはどうすればよいですか?

CSS を使用して HTML リストの箇条書きの色をカスタマイズする

HTML リストで箇条書きの外観をカスタマイズすると、コンテンツの視覚的な魅力を高めることができます。ただし、CSS を使用してリスト項目の色を設定すると、テキストと箇条書きの両方に影響します。より洗練された解決策として、次のアプローチを検討してください:

順序なしリスト (

) の新しい CSS スタイルを作成します。 list-style: none; を設定してデフォルトの箇条書きを無効にします。

各リスト項目 (

• ) の左側にパディングと負のテキストインデントを追加して、箇条書きからコンテンツをオフセットします。

  最後に、::before 疑似要素を使用して、各リスト項目の前にカスタムの箇条書きを作成します。コンテンツ (ドットや四角形など) と色を個別に設定できます。

  例:

  HTML

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

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

  以上がCSS を使用して HTML リストの箇条書きの色をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。