Styling list markers (bullets) without using an image

HTML & CSS
1

Trying to figure out how to change color of a bullet under <ul><li> without resorting to creating a bullet with the color I want as a jpg while leaving the color of the text in the <li> alone.

/stext text/
.stext { color : #000000; font-family: Times, serif; font-weight : normal; font-size : 14px; font-style: normal;
letter-spacing : 0pt; text-decoration: none; line-height: 17px; margin: 0px 0px 6px 0px;}

.stext ul li { color : #000000; font-family:  Times, serif; font-weight : normal; font-size : 14px; font-style: normal;
	letter-spacing : 0pt; text-decoration: none; line-height: 17px; margin: 0px 0px 6px 0px;}

Thanks

sponge

2

I believe you are missing a basic concept of what an LI is. The bullet is generated ‘content’ ( actually is a ‘marker’… but that’s another issue all together) within the LI tag, so whatever you do to the LI you do to the bullet.

So really we have two options here ( other than graphics).

  1. Wrap the content of the LI ( if not already so) and target each separately.

<LI> <SPAN>inline li text</span></LI>
<LI><P> pragraph....</P><P> pragraph....</P><LI>
 li {color:red;}
li>*{color:black;}

OR generate the bullet yourself. This adds its own set of challenges and advantages but does give you a lot of control over the “bullet”

li{ list-style:none;}
li:before{ list-style:none; content :"*"; color:red; float: left; margin-left:-2em;}

Hope that helps.

3

Very nice. I can make this work another time. Being that I am working in a proprietary CMS, I opted to use a Unicode for bullet and span the color selector around it. Spacing controlled, color controlled, and the text then took up the class designated for the cell I was working in.

I like your css approach and will use it in the future.

sponge