CSS Text between Li items

[davidjdoherty]

Hi, I'm not sure if its possible to do but I couldn't find a solution
on the net.

<UL>
<LI>Text1</LI>
<LI>Text2</LI>
<LI>Text3</LI>
</UL>

Basically I want it to display like this:

Text1 - Text2 - Text3


I don't have control how the UL and LI elements are rendered, so can is
it possible to use CSS to put some text in between each element. I can
simply make it inline so that it renders like:

Text1 Text2 Text3

But can you use CSS to put in the '-'?

Any help would be greatly appreciated.
Dave

 

[mbstevens]

Hi, I'm not sure if its possible to do but I couldn't find a solution
on the net.

<UL>
<LI>Text1</LI>
<LI>Text2</LI>
<LI>Text3</LI>
</UL>

Basically I want it to display like this:

Text1 - Text2 - Text3


I don't have control how the UL and LI elements are rendered, so can is
it possible to use CSS to put some text in between each element. I can
simply make it inline so that it renders like:

Text1 Text2 Text3

But can you use CSS to put in the '-'?

Any help would be greatly appreciated.
Dave

See the the following article:
http://www.alistapart.com/articles/taminglists/

 

[Mitja Trampus]

<UL>
<LI>Text1</LI>
<LI>Text2</LI>
<LI>Text3</LI>
</UL>

Basically I want it to display like this: [using CSS only]

Text1 - Text2 - Text3

To make those dashes real text, you'd need parts of CSS that are not yet widely supported
(see "content" property in CSS specs) and are not about to be in the near future (IE!).

You can, however, make that dash with a non-repeating background image on the LIs. To hide
the first dash, apply some negative margin to LIs (to shift them left) and set UL's
overflow to hidden (to clip off the left part of the leftmost LI).

I've never done this, not even as a test, but it should work.

 

[Jim Moe]

<UL>
<LI>Text1</LI>
<LI>Text2</LI>
<LI>Text3</LI>
</UL>

Basically I want it to display like this:

Text1 - Text2 - Text3

<UL>
<LI>Text1</LI>
<LI> - </LI>
<LI>Text2</LI>
<LI> - </LI>
<LI>Text3</LI>
</UL>

 

[Dado]

Cool, cheers for that article mb. It has exactly what I'm after. The
dividing line does not have to be text selectable so I'm just going to
do it with borders.

Dave