Unicode character as bullet for list-item in CSS

You can construct it:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

<ul id="modal-select-your-position">
  <li>First item</li>
  <li>Second item</li>
</ul>

Using Text As Bullets

Use li:before with an escaped Hex HTML Entity (or any plain text).

Example

My example will produce lists with check marks as bullets.

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Browser Compatibility

Haven't tested myself, but it should be supported as of IE8. At least that's what quirksmode & css-tricks say.

You can use conditional comments to apply older/slower solutions like images, or scripts. Better yet, use both with <noscript> for the images.

HTML:

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

About background images

Background images are indeed easy to handle, but...

1. Browser support for background-size is actually only as of IE9.
2. HTML text colors and special (crazy) fonts can do a lot, with less HTTP requests.
3. A script solution can just inject the HTML Entity, and let the same CSS do the work.
4. A good resetting CSS code might make list-style (the more logical choice) easier.

Enjoy.

EDIT

I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:

li:before {
  content: "\2605";
}

OLD ANSWER

I'd probably go for an image background, they're much more efficient versatile and cross-browser-friendly.

Here's an example:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

This is the W3C solution. You can use it in 3012!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

Update: according to the comments this works in all modern browsers in 2021.