Изменение цвета двух элементов содержимого элемента списка

У меня есть li навигация с разделителями, созданная с помощью приведенного ниже кода. Я хотел бы иметь два из этих | элементы, но разные цвета, можно ли определить разные цвета для обоих?Изменение цвета двух элементов содержимого элемента списка

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

Я хотел бы еще один, но с #F2659A и в непосредственной близости от существующих.

Вот живой URL, чтобы увидеть, как выглядят вещи прямо сейчас: http://www.jordancharters.co.uk/nakedradish/

источник

2013-10-24 JordanC26

Дайте уникальный идентификатор для всех элементов Li, так как у вас уже есть я предполагаю, то для достижения различных цветов, попробуйте дать разные имена классов имеют разные цвета. –

Можете ли вы сделать быстрый JSFiddle, чтобы дать пример того, что вы пытаетесь сделать? – Ruddy

OP хочет, чтобы два символа трубы '|' по-разному раскрашивались в одном и том же содержимом 'li: before'. – mavrosxristoforos

Я не знаю, если это вариант для вас, но вы можете использовать :after псевдо-элемент, так как вы используете :before, как это:

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

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

Я не могу думать о какой-либо другой способ сделать это два разных цвета, без фактического HTML, используя фактические трубы |. И все мы знаем, что HTML не разрешен в свойстве content.

EDIT: Вы можете использовать border: 1px solid #F2659A;, хотя эффект будет аналогичным. Просто убедитесь, что вы используете его для элемента #navigation li a, а затем вы можете манипулировать интервалом (с полями и прокладками).

источник

2013-10-24 09:55:49 mavrosxristoforos

Это происходит, когда я делаю ваш пример. Слишком большая часть пробела: http://jsfiddle.net/8KZU2/ – JordanC26

Думая об этом, вы также можете добавить 'border'. – mavrosxristoforos

Попробуйте 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;

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

источник

2013-10-24 10:26:58

О, просто понял, что вы хотите, чтобы «два символа трубы» по-разному по-разному находились в том же ли: перед контентом ». –

Основываясь на предыдущих примерах настройки довольно просты при использовании двух псевдо-элементов.

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

источник

2013-10-24 12:34:59

Изменение цвета двух элементов содержимого элемента списка

ответ

Смежные вопросы