更改两个不同列表项内容元素的颜色

Question

我有li导航，其中使用下面显示的代码创建了分隔符。我想要其中两个|元素但颜色不同，是否可以为两者定义不同的颜色？

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

我想要另一个但是#F2659A并且紧挨着现有的。

这是现在的网址，看看现在看起来如何： http://www.jordancharters.co.uk/nakedradish/

Answer 1

尝试：nth-​​child选择<li>中的每个奇数（例如）<ul>，然后添加其他颜色：在它之后。

#navigation li:nth-child(odd):after {
   color: #F2659A;
}

<强> UPD。

content: "";
color: #800836; /* Dont need anymore */
box-shadow: 2px 0 0 0 #800836;
border-left: 2px solid #F2659A;

Answer 2

我不知道这是否适合您，但您可以使用:after伪元素，因为您使用:before，如下所示：

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

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

我想不出任何其他方法可以使用实际的管道|使其具有两种不同的颜色而没有实际的HTML。我们都知道content属性中不允许使用HTML。

编辑：但您可以使用border: 1px solid #F2659A;，效果也类似。只需确保将其用于#navigation li a元素，然后就可以操作间距（使用边距和填充）。

Answer 3

根据前面的例子，如果使用两个伪元素，调整非常简单。

CODEPEN EXAMPLE

CSS Extract：

li {
  height:40px;
  display:inline-block;
  position:relative;
}

li:before,
li:after {
  position:absolute;
  vertical-align:middle;
  content:"|";
  left:100%;
  top:8px; /* eyeballed it */
  height:40px;
}

li:before {
  color: #800836;
}

li:after {
  color:#F2659A;
  margin-left:8px; /* change this to adjust gap */
}