1

Taxonomy and status of CSS3 modules.
● Recommendation
● Candidate Recommendation
● Last Call
● Working Draft.

I need to make this that you see above. the circles have to have different colors. I'm not asking anyone to do this for me, but i was hoping someone on here could point me in the right direction.
Any help would be appreciated.

The Process
  • 5,913
  • 3
  • 30
  • 41
dwfieldjr
  • 31
  • 1
  • 3
  • That's what the CSS `color` property is for. Put each bullet in its own `span` and set CSS appropriately. – Jim Garrison Feb 25 '16 at 02:05
  • Check out the solution here http://stackoverflow.com/questions/7069096/how-to-set-ul-li-bullet-point-color – Josh S. Feb 25 '16 at 02:05

2 Answers2

3

You can set list-style to none, and insert a dot with :before :

ul,
li {
  list-style: none;
  padding: 0;
  }

.rec:before {
  color: red;
 }
.can:before {
  color: blue;
 }
.lastCall:before {
  color: yellow;
 }

.working:before {
   color: black;
 }

.dot-style:before {
  content: "•";
  padding-right:4px;
  vertical-align:middle;
  font-size:1.8em;
}
<ul>
  <li class="rec dot-style">Recommendation</li>
  <li class="can dot-style">Candidate Recommendation</li>
  <li class="lastCall dot-style">Last Call</li>
  <li class="working dot-style">Working Draft</li>
<ul>
The Process
  • 5,913
  • 3
  • 30
  • 41
  • 1
    4 of those 5 properties are the same. It would be DRYer to put those properties in a common selector (`li::before`) and only have the `color` property associated with the class selectors. – steveax Feb 25 '16 at 04:33
  • how did you get that bullet point in there content:"."; ? – dwfieldjr Feb 26 '16 at 02:43
2

just put a span around the elements and use classes to change the colors.

Taxonomy and status of CSS3 modules. <span class="red">●</span> Recommendation <span class="yellow">●</span> Candidate Recommendation <span class="green">●</span> Last Call <span class="blue">●</span> Working Draft

.red{
  color: red;
}
.yellow{
  color: yellow;
}
.green{
  color: green;
 }
.blue{
  color: blue;
}
SeanKelleyx
  • 1,155
  • 13
  • 15