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

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

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

编解码示例

CSS 提取：

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 */
}