CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 6197

Making vertical list, and putting something between the items

The first part of problem is easy:

http://jsfiddle.net/Pq3KM/

ul li
{
    display: inline-block;
}

<ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>

so far it works OK, but I want something between the items. For example, I want them to look alike:

menu1 | menu2 | menu3

instead of

menu1 menu2 menu3

how to do this?

Upvotes: 1

Views: 51

Answers (2)

Syd
Syd

Reputation: 185

You can simply do that by adding a vertical line char before 'li' other than first one.

<ul>
   <li>menu1</li>
 | <li>menu2</li>
 | <li>menu3</li>
</ul>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

You can use :after pseudo for this, here am using | pipe character, which am embedding using content property with an :after pseudo. And for the last element, am using last-of-type to get rid of the pipe. Here you can also add a background-image by making the :after pseudo an inline-block element. You can also space upDemo the element by turning it into an inline-block

Demo

ul li:after {
    content: " | ";
}

ul li:last-of-type:after {
    content: "";
}

Upvotes: 2

Related Questions