更改兩個不同列表項內容元素的顏色

我有一個li導航，其中使用下面顯示的代碼創建分隔線。我想要有兩個這樣的|元素但顏色不同，是否可以爲兩者定義不同的顏色？更改兩個不同列表項內容元素的顏色

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

我想要另一個但#F2659A和右邊現有的。

這裏是直播的網址，看看事情如何看現在： http://www.jordancharters.co.uk/nakedradish/

來源

2013-10-24 JordanC26

給唯一的ID給所有li元素，因爲你已經有我猜，然後來實現不同的顏色，試着給不同的類名稱有不同的顏色。 –

您可以製作一個快速的JSFiddle來舉例說明您正在嘗試做什麼？ – Ruddy

OP希望兩個管道字符「|」在同一個「li：before」內容中有不同的顏色。 – mavrosxristoforos

我不知道這是一個選擇，但是你可以使用:after僞元素，當你使用:before，像這樣：

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

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

我想不出任何其他方式使其具有兩種不同的顏色沒有實際的HTML，用實際管|。我們都知道content屬性中不允許使用HTML。

編輯：雖然你可以使用border: 1px solid #F2659A;，效果會類似。只要確保將其用於#navigation li a元素，然後就可以操縱間距（帶邊距和填充）。

來源

2013-10-24 09:55:49 mavrosxristoforos

當我做你的例子時，會發生這種情況。太多的差距：http://jsfiddle.net/8KZU2/ – JordanC26

考慮一下，你也可以添加一個'border'。 – mavrosxristoforos

嘗試：nth-child在您的<ul>中選擇每個奇數（例如）<li>，然後添加其他顏色：之後。

#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;

Please take a look at the screenshot: is that what you need?

來源

2013-10-24 10:26:58

呵呵，只是明白你想要「兩個管道字符在同一個li中有不同的顏色：在內容之前。」 –

根據以往的例子中的調整是，如果使用兩個僞元素非常簡單。

CODEPEN EXAMPLE

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

來源

2013-10-24 12:34:59

更改兩個不同列表項內容元素的顏色

回答

相關問題