Text Separators for LI Elements

Question

I'd like to add a forward slashes ('/') between my li elements, but I'm not sure of the best way to do that semantically. Right now, I'm simply including the forward slash in the li tag and adding spacing with non-breaking spaces, like so:

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

What do you think? Thanks.

Pastiche

Do you need to support IE7? caniuse.com/css-gencontent – Ahimsa

possible duplicate of Separators For Navigation – Inconvenient

Answer 1

You can use pseudo-elements to include text after an element and you can use CSS3 selectors to remove the trailing slash from the last element.

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

EDIT:

The whole thing can be done in one line with better CSS3.

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

EDIT: EDIT:

It's even easier than that.

#footer_menu li + li:before {
    content: "/";
}

Meuse

Answer 2

This is my solution for LI element separated by | (pipe) :

li + li:before {
    content: " | ";
}

The adjacency combinator (a plus sign, +) comes in very handy in this case. It allows you to style an element if it has been directly preceded by another specified element. Since the first li is not preceded by another li, it won't have the content prepended to it. This is much less typing than:

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}

Southernmost

nice example. Would you know a way to do this if prior elements were hidden such as when using Bootstrap hide-* ? – Ozenfant

Answer 3

You could put the li content in a span and then use CSS:

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

Or something similar.

edit Ah like Kyle said, but the addition of the last_child rule is more complete.

Ellis

Answer 4

For those using Sass, I have written a mixin for this purpose:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Example:

@include addSeparator('li', '|', 1em);

Which will give you this:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Inconvenient

Answer 5

If you're trying to do something like Customer Support / Shipping Info / Size Charts / Privacy Policy / Contact You could just do it with some CSS

You'll need to add the "first" class to the first li in your set like the following

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

And then the following CSS

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

This will put all the li elements next to each other and give you a border. The result will look something like

Customer Support | Shipping Info | Size Charts | Privacy Policy | Contact

Epirogeny

This isn't exactly what the guy was asking for. / != | – Meuse

Noted, but this solution is cross browser compatible without adding additional CSS rules or hacks if only you can get past the fact that the there is a slight angle change in the resulting separator. – Epirogeny