Best method To Have Text between Links in ULs

I am working on a little project that involves Word Press. I took a chance and asked a question over on the WP forums, but got terrible results. (The people over there are not nearly as friendly as the people here. They insult you, and if you ask a follow up question the mods get furious, call it arguing, and close the thread.. All due to other members. So i highly suggest sticking to CF.)

I am working on a navigation, and I've been trying to think of the best way to have a grep between each link. I'm not wanting to cause SEO problems. I was thinking something like


li:before {
content: "|";
}

li:last-child {
...
}
But I'm not sure whether the majority of browsers support
content or last-child.

I thought about using a simple div like


#space {
padding; 0 4px 0 4px;

<div id="space">|</div>
But I am afraid that might cause SEO problems. I highly doubt it would matter in my navigation.. But I still want to find the best method.

My desired result is

link1 | link2 | link3 |link4


<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
I don't want to bring WP into the whole conversation because that doesn't really fit into the html / css category and more so the general web building side of the forums.. But those familiar with WP know it uses wp_list_pages to call the page links. You can of course call them individually, however that means you have to modify the navigation output each time you add a page. This is just a reminder to those familiar with it.

Could any one please suggest the best method to have text between links that are list items?

Thanks!

Hello stevenmw,
I totally agree that CF is much more user friendly than most other forums! That's how and why I ended up here :)

I've done what you're trying to accomplish several times like this - <ul id="menu">
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
</ul>


Just style .dvdr however you like.

Hello stevenmw,
I totally agree that CF is much more user friendly than most other forums! That's how and why I ended up here :)

I've done what you're trying to accomplish several times like this - <ul id="menu">
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
<li><span class="dvdr">|</span></li>
<li><a href="">linky</a></li>
</ul>
Just style .dvdr however you like.


Perfect! Thank you so much. I'll have to build a walker for WP so it shows up outside my anchor tags, but that will be easy.

Why not set border-left : 1px #000 solid instead of using |

That way you avoid the content issue and can use first-child (which is CSS2 and therefore supported by all current browsers) rather than last-child (which is CSS3 and therefore only supported by some browsers) to override it with border : none

li {border-left 1px #000 solid;}
li:first-child {border : none;}

That would avoid having to update the HTML (which will have the bullets between the links if the CSS is turned off and so would still be as accessible.

felgall, i thought of that too. But i want it to be interchangeable. So later on down the line I can replace it with another piece of text. Plus I want my grep to have a slightly larger font size than my link text.

But mainly because iwant it to be interchangable , and so I can control the styling of the font, sizing, etc.

But the first-child is a good idea.