Can't get my link color to work with circle

Question

I have set the following to generate circles in my <li> items

li {     list-style: circle; color: #fcbf00; }

It doesn't display color however. How can I fix this?

Posted a link to show my full CSS: http://pastebin.com/1h7YyGqW

Please [reproduce your problem](http://stackoverflow.com/help/mcve), your whole CSS is hard to read, and nearly impossible to check if anything is overriding your color. — Clemens Himmer, Feb 05 '16 at 11:59

yunzen · Answer 1 · 2016-02-05T12:07:41.803

0

Because of your margin settings with * selector you cannot see your bullets.

Add a padding or margin to the body container or set the list-style-position to inside

.ul1 li {
  list-style: circle outside;
  color: red;
}
.ul2 li {
  list-style: circle inside;
  color: green;
}
.ul3 {
  padding: 0 2em;
}
.ul3 li {
  list-style: circle outside;
  color: blue;
}
* {
  margin: 0;
  padding: 0;
}


body {width: 200px;}

<h2>Outside list</h2>
<ul class="ul1">
  <li>Lorem ipsum dolor sit amet, consectetur.</li>
  <li>Id nesciunt, provident! Ullam, voluptate, ipsum!</li>
  <li>Blanditiis voluptatibus deleniti amet. Assumenda, praesentium.</li>
</ul>
<h2>Inside list</h2>
<ul class="ul2">
  <li>Lorem ipsum dolor sit amet, consectetur.</li>
  <li>Voluptates tempora laudantium saepe voluptas placeat.</li>
  <li>Harum accusamus nihil consequuntur, hic repudiandae.</li>
</ul>
<h2>Outside list with padding</h2>
<ul class="ul3">
  <li>Lorem ipsum dolor sit amet, consectetur.</li>
  <li>Molestiae saepe minus, quod officia ducimus.</li>
  <li>Omnis nisi excepturi nobis neque. Unde.</li>
</ul>

edited Feb 05 '16 at 12:07

answered Feb 05 '16 at 11:57

yunzen

32,854
11
73
106

I can see the bullets (circles) they just don't color up to orange #fcbf00; – Steef0w Feb 05 '16 at 12:05
I could not see the bullets with your pastebin code. But they are colored with me. What is your browser? – yunzen Feb 05 '16 at 12:08
I am using Google Chrome as browser. – Steef0w Feb 05 '16 at 13:00
I need to see your html code as well. Only CSS doesn't suffice – yunzen Feb 05 '16 at 13:19
@Steef0w It doesn't matter to the browser where the HTML comes from. See this codepen. http://codepen.io/HerrSerker/pen/c40cf571f5a74402e64bbf3559f08f18 I just added a margin to the `li` – yunzen Feb 05 '16 at 15:06

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

Duplicated.

Are you looking for something like this?

If not, maybe you should try to set an image as bullet with list-style-image

edited May 23 '17 at 12:15

Community

1
1

answered Feb 05 '16 at 12:19

Matheus Godoy

72
1
5

I have tried above solution, now I'm getting the orange "circles" - only problem is, there's also black circles infront of them. Example here: http://jsfiddle.net/ytH5P/6219/ – Steef0w Feb 05 '16 at 13:08
This solution only applies when you have a `list-style-type: none`. – Matheus Godoy Feb 05 '16 at 13:24

Can't get my link color to work with circle

2 Answers2