html - 2 つの異なるリスト アイテム コンテンツ要素の色の変更

Question

以下に示すコードを使用して作成された仕切りのあるliナビゲーションがあります。2つ欲しいです | 要素ですが、色が異なります。両方に異なる色を定義することは可能ですか?

#navigation li:before {
    content: "|";
    color: #800836;
}

別のものが欲しいのですが#F2659A、既存のすぐ隣にあります。

現在の状況を確認できるライブ URL は次のとおりです: http://www.jordancharters.co.uk/nakedradish/

Answer 1

これがオプションかどうかはわかりませんが、次のように を使用するため、:after疑似要素を使用できます:before。

#navigation li:before {
  content: "|";
  color: #800836;
}

#navigation li:after {
  content: "|";
  color: #F2659A;
}

実際のパイプを使用して、実際の HTML なしで 2 つの異なる色にする他の方法は考えられません|。また、プロパティで HTML が許可されていないことは誰もが知っていcontentます。

編集：使用できますborder: 1px solid #F2659A;が、効果は似ています。要素に使用することを確認してください。そうすれば、#navigation li a間隔を操作できます（マージンとパディングを使用）。