SEO Freelancer

Modern Separators In Lists Menu

Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers such as Firefox 2 or Opera 9, which allows us to make really interesting CSS pirouettes.

For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:

Item1 | Item2 | Item3 | Item4

Now we will use modern smart browsers. We will take a simple list without separators:

<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>

and add separators BY CSS itself with this style:

CSS

1. li {
2. display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1px solid #ccc
3. }
4. li:first-child {
5. border-left:none
6. }

Now we have:

Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.

Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.

Here is an another interesting approach:

1. #nav{
2. overflow:hidden;
3. width:100%;
4. }
5. #nav li{
6. margin-left:-1px;/* all elements go on left*/
7. }