Unicode character as bullet for list-item in CSS

Handling cross-browser compatibility

Not every browser can join the modern Unicode party. To ensure a uniform experience across all parties, use conditional comments for retro browsers. They won't feel left out:

<!--[if lte IE 8]>
    <style type="text/css">
      /* Styles for the grandfather of browsers */
      li:before {
        /* Bring in the alternatives */
      }
    </style>
<![endif]-->


For spaceships (browsers) where scripts cannot be executed, send in the <noscript> astronauts with the traditional bullet styles:

<noscript>
  <style>
    ul {
      list-style-type: disc; /* Classic never gets old */
    }
  </style>
</noscript>


To keep the resolution of your list markers sharp on every screen, sidestep the image route. Text-based solutions have better eyesight and promise fewer HTTP requests.

Nailing custom style and alignment

Perfect the visual alignment of your list for a professional look. Ensure bullets don't lose their way especially in nested lists or long lines. Use box model properties like padding and margin, combined with position: absolute for reigning your bullets:

li::before {
  content: "\2726"; /* Your chosen Unicode character */
  padding-right: 8px; /* Room for text */
  float: left; /* Align box with the first line of text */
  position: absolute;
  left: 0;
}

li {
  list-style: none;
  padding-left: 20px; /* Moving text to the right line */
  position: relative;
}


Across different list items, ensure consistent sizing by using pixel values over em units, which might fluctuate like currency rates.

Coloring and font-styling bullets

Venture into font and color arenas to make your Unicode bullets more eye-catching. Manipulate color property and pick fonts that give life to your Unicode characters:

li::before {
  content: "\2726";
  color: #5A5A5A; /* 50 Shades of Gray for bullets */
  font-size: 1.2em; /* Scale according to your threshold */
  font-family: 'CustomFont', sans-serif; /* If it can support your Unicode */
}


Unlocking advanced custom bullet styling

Future-proof your lists. Start exploring CSS3 module for lists and get your hands dirty with advanced styling techniques. Keep abreast of the CSS draft specifications for list markers to know when new methods arrive on the scene.