可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I was wondering if there is a way to change the color on the bullets in a list.

I have a list like this:

House
    Car
    Garden

It is not possible for me to insert anything in the li's such as a 'span' og a 'p'. So can I change the color of the bullets but not the text in some smart way?

回答1:

If you can use an image then you can do this. And without an image you won't be able to change the color of the bullets only and not the text.

Using an image

li { list-style-image: url(images/yourimage.jpg); }

See

list-style-image

Without using an image

Then you have to edit the HTML markup and include a span inside the list and color the li and span with different colors.

回答2:

I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before (no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. The bullet style is also limited by what's in unicode.

li {   list-style: none; } li:before {   /* For a round bullet */   content: '\2022';   /* For a square bullet */   /*content:'\25A0';*/   display: block;   position: relative;   max-width: 0;   max-height: 0;   left: -10px;   top: 0;   color: green;   font-size: 20px; }

foo
   bar

回答3:

We can combine list-style-image with svgs, which we can inline in css! This method offers incredible control over the "bullets", which can become anything.

To get a red circle, just use the following css:

ul {   list-style-image: url('data:image/svg+xml,'); }

But this is just the beginning. This allows us to do any crazy thing we want with those bullets. circles or rectangles are easy, but anything you can draw with svg you can stick in there! Check out the bullseye example below:

ul {   list-style-image: url('data:image/svg+xml,'); } ul ul {   list-style-image: url('data:image/svg+xml,'); } ul ul ul {   list-style-image: url('data:image/svg+xml,'); } ul ul ul ul {   list-style-image: url('data:image/svg+xml,'); } ul.bulls-eye {   list-style-image: url('data:image/svg+xml,'); } ul.multi-color {   list-style-image: url('data:image/svg+xml,'); }

     Big circles!      Big rectangles!
       b         Small circles!
           c             Small rectangles!
               b
             
         
     
   b
 
Bulls
   eyes.
 
Multi
   color

Width/height attributes

Some browsers require width and height attributes to be set on the , or they display nothing. At time of writing, recent versions of Firefox exhibit this problem. I've set both attributes in the examples.

Encodings

A recent comment reminded me of encodings for the data-uri. This was a pain-point for me recently, and I can share a bit of information I've researched.

The data-uri spec, which references the URI spec, says that the svg should be encoded according to the URI spec. That means all sorts of characters should be encoded, eg becomes %3C.

Some sources suggest base64 encoding, which should fix encoding issues, however it will unnecessarily increase the size of the SVG, whereas URI encoding will not. I recommend URI encoding.

More info:

browser-support: >ie8

css tricks on svgs

mdn on svgs

回答4:

Building off @Marc's solution -- since the bullet character is rendered differently with different fonts and browsers, I used the following css3 technique with border-radius to make a bullet that I have more control over:

li:before {     content: '';     background-color: #898989;     display: inline-block;     position: relative;     height: 12px;     width: 12px;     border-radius: 6px;     -webkit-border-radius: 6px;     -moz-border-radius: 6px;     -moz-background-clip: padding;     -webkit-background-clip: padding-box;     background-clip: padding-box;     margin-right: 4px;     top: 2px; }

回答5:

Building off both @Marc and @jessica solutions - This is the solution that I use:

li {     position:relative; } li:before {       content:'';       display: block;       position: absolute;       width: 6px;       height:6px;       border-radius:6px;       left: -20px;       top: .5em;       background-color: #000; }

I use em for font sizes so if you set your top value to be .5em it will always be placed to the mid point of your first line of text. I used left:-20px because that is the default position of bullets in browsers: parent padding/2

回答6:

I know this is a really, really, old question but i was playing around with this and came up with a way i have not seen posted. Give the list a color and then overwrite the text color using ::first-line selector. I'm no expert so maybe there is something wrong with this approach that I'm missing, but it seems to work.

li {   color: blue; }  li::first-line {   color: black; }

House
   Car
   Garden

回答7:

I really liked Marc's answer too - I needed a set of different colored ULs and obviously it would be easier just to use a class. Here is what I used for orange, for example:

ul.orange {     list-style: none;     padding: 0px; } ul.orange > li:before {     content: '\25CF ';     font-size: 15px;     color: #F00;     margin-right: 10px;     padding: 0px;     line-height: 15px; }

Plus, I found that the hex code I used for "content:" was different than Marc's (that hex circle seemed to sit a bit too high). The one I used seems to sit perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.) right here

回答8:

For me the best option is to use CSS pseudo elements, so for disc bullet styling it would look like that:

ul {   list-style-type: none; }  li {   position: relative; }  li:before {   content: '';   display: block;   position: absolute;   width: 5px; /* adjust to suit your needs */   height: 5px; /* adjust to suit your needs */   border-radius: 50%;   left: -15px; /* adjust to suit your needs */   top: 0.5em;   background: #f00; /* adjust to suit your needs */ }

first
   second
   third

Notes:

width and height should have equal values to keep pointers rounded
you may set border-radius to zero if you want to have square list bullets

For more bullets styles you may use other css shapes https://css-tricks.com/examples/ShapesOfCSS/ (choose this which doesn't require pseudo elements to work, so for example triangles)

回答9:

Building on @ddilsaver's answer. I wanted to be able to use a sprite for the bullet. This appears to work:

li {   list-style: none;   position: relative; }  li:before {   content:'';   display: block;   position: absolute;   width: 20px;   height: 20px;   left: -30px;   top: 5px;   background-image: url(i20.png);    background-position: 0px -40px; /* or whatever offset you want */ }

文章来源: Change bullets color of an HTML list without using span

标签

position

list-style