I am extremely new to HTML. I have figured out most of what I am trying to do from w3schools, but i can not figure out how to use arrow in an HTML list from a CSS.

I tried images but I did not like to look. is there a better way to accomplish arrow in a list with out images?

I am specifically trying to map out cisco commands and use arrow to show the command flow. for example

MLS QoS -> aggregate-policer
______|->map->cos-dscp
____________|->dscp-cos


Any ideas would help, also help with aligning the text properly. I was thinking about using the same words just hiding them to keep the spacing?

Thank you
Rob

You can use an image of an arrow, either as an inline image or (better) as a positioned background image. Turn the default list bullets off.

Or you can insert an arrow character with content and :before . Older browsers won't display this.
http://www.w3.org/TR/CSS2/generate.html#before-after-content

I actually haven't tried the latter option with lists, but I don't see why it wouldn't work.

If the arrow image is part of the content, I suggest using inline images (the IMG element with proper ALT text), or ASCII art.

But if it's just for decoration, a CSS background-image could work (with varying amounts of left padding on the LI element for different arrow lengths). You can also use CSS "list-style-image", but unlike a background image you can't position it.

Padding would work with an inline image, but not with a background. It needs to be positioned.

I didn't notice there were arrows in context too, not only used as bullet. You are right, an arrow symbol alternatively an inline image would be best then. A background is easier but not suitable for this. Unless doubled up with a hidden arrow character, but I think those tricks get a little fuzzy.

I meant you need to provide space (padding) in the LI so that the text doesn't cover the background image.

Oh! OK.

Thanks for the advice. I will try and see what I come up with.

Rob