Posted by Mitja Trampus on 02/28/06 02:33

davidjdoherty@gmail.com wrote:
> <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.

[Back to original message]