Use CSS to Alternate Ul Bullet Point Styles

Use CSS to alternate ul bullet point styles

Like this...

li { list-style: circle; }
li li { list-style: disc; }
li li li { list-style: square; }

And so on...

The first level of list items will have the "circle" type marker. The second (embedded) will use "discs". The third level will use squares.

Simply take the above CSS and change the list-style to suit your needs. You can find a list of list-style types here: http://www.w3schools.com/cssref/pr_list-style-type.asp

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

The most common way to do this is something along these lines:

ul {  list-style: none;  padding: 0;  margin: 0;}
li {  padding-left: 1em;   text-indent: -.7em;}
li::before {  content: "• ";  color: red; /* or whatever color you prefer */}

<ul>  <li>Foo</li>  <li>Bar</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

CSS to recreate LI with bullet, but without using a LI

You can use CSS classes to do that:

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

And if you need an arbitrary image, go like LI.whatever { list-style: url(myimage.png) }

How to make a HTML list appear without the bullets signs using CSS only?

ul { list-style: none; }

That gets rid of the bullet points. Now you can go ahead and assign styles to space them out like in your example, if that's what you really wanted:

li { padding: 5px 0; }

If you also don't want the list indented after removing the bullets, it will take another bit, like this:

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

If you dont set both margin and padding to 0, it will either look right in FF or IE, but not both

CSS: Control space between bullet and li

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

li span {  position: relative;  left: -10px;}

<ul>  <li><span>item 1</span></li>  <li><span>item 2</span></li>  <li><span>item 3</span></li></ul>

How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?

I would approach solving this problem using a pseudo element before each li

Here is the markup

ul {    list-style: none;}
li {    position: relative;}
li:before {    /*    The desired width gets defined in two places: The element width, and background size.    The height only gets defined once, in background size.    */    position: absolute;    display: block;    content: '\2022'; /* bullet point, for screen readers */    text-indent: -999999px; /* move the bullet point out of sight */    left: -.75em;    width: .4em; /* desired width of the image */    height: 1em; /* unrelated to image height; this is so it gets snipped */    background-repeat: no-repeat;    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');    background-size: .4em .7em;    background-position: 0 .3em;}
.small-list {    font-size: 85%;}
.large-list {    font-size: 150%;}

<ul class="small-list">  <li>The goal is to make the chevron smaller for this list</li>  <li>Specifically, just slightly smaller than capital letters, as stated.</li>  <li>Nomas matas</li>  <li>Roris dedit</li></ul>    <ul class="large-list">  <li>And larger for this list</li>  <li>Multiline list item<br>for testing</li>  <li>Nomas matas</li>  <li>Roris dedit</li></ul>

Use CSS to Alternate Ul Bullet Point Styles