CODEWITHSUNDEEP
htmlcssnavigationhtml-lists
wharfdale
wharfdale

Reputation: 752

Changing colour of two different list item content elements

I have an li navigation with dividers created using the code shown below. I'd like to have two of these | elements but different colours, is it possible to define different colours for both?

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

I'd like another but with #F2659A and right next to the existing.

Here is the live url to see how things look right now: http://www.jordancharters.co.uk/nakedradish/

Upvotes: 1

Views: 187

Answers (3)

Paulie_D
Paulie_D

Reputation: 115046

Based on previous examples the adjustments are pretty simple if using two pseudo-elements.

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

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Try :nth-child to select every odd (for example) <li> in your <ul>, and then add the other color :after it.

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

Upvotes: 1

mavrosxristoforos
mavrosxristoforos

Reputation: 3643

I don't know if this is an option for you, but you can use the :after pseudo-element, as you use the :before, like this:

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

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

I cannot think of any other way to make it have two different colors without actual HTML, using actual pipes |. And we all know that HTML is not allowed in the content property.

EDIT: You can use border: 1px solid #F2659A; though, and the effect will be similar. Just make sure you use it for the #navigation li a element and then you can manipulate spacing (with margins and paddings).

Upvotes: 0

Related Questions