Change bullets color of an HTML list without using span

by

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;
}
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

More Related Contents:

  1. How can I make this background to see full?
  2. How to make an element width: 100% minus padding?
  3. Best way to center a on a page vertically and horizontally? [duplicate]
  4. vertical-align with Bootstrap 3
  5. How to align content of a div to the bottom
  6. With CSS, use “…” for overflowed block of multi-lines
  7. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  8. Fix footer to bottom of page
  9. Html/Css Triangle with pseudo elements
  10. Force flex item to span full row width
  11. Removing body margin in CSS
  12. Show loading screen when navigating between routes in Angular 2
  13. Adding images with option tag [duplicate]
  14. Position absolute and overflow hidden
  15. Text not centered with justify-content: center
  16. Setting a width and height on an A tag
  17. Create a slanted edge to a div [duplicate]
  18. Position sticky on thead
  19. How to rotate a 90 degrees?
  20. vs. font-weight:bold & vs. font-style:italic
  21. Add border to div increase div width?
  22. CSS Selector “(A or B) and C”?
  23. How to darken a background using CSS?
  24. How to change one element while hovering over another with CSS
  25. How to make CSS Grid items take up remaining space?
  26. CSS attribute selector does not work a href
  27. HTML/CSS set div to height of sibling
  28. Should Tables be avoided in HTML at any cost?
  29. Change image on hover
  30. Why does a border increase the element’s width?

Leave a Comment