Preciso usar, por exemplo, o símbolo de estrela (★) como marcador para um item da lista.

Eu li o módulo CSS3: Listas , que descreve como usar texto personalizado como marcadores, mas não está funcionando para mim. Eu acho que os navegadores simplesmente não suportam o::marker pseudo elemento.

Como posso fazer isso sem usar imagens?

EDITAR

Eu provavelmente não recomendaria mais usar imagens. Eu manteria a abordagem de usar um caractere Unicode, como este:

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

RESPOSTA ANTIGA

Eu provavelmente escolheria um fundo de imagem, eles são muito mais eficientes, versáteis e compatíveis com vários navegadores.

Aqui está um exemplo:

<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>

Usando texto como marcadores

Use li:beforecom uma Entidade HTML Hex de escape (ou qualquer texto simples).

Exemplo

Meu exemplo produzirá listas com marcas de seleção como marcadores.

CSS :

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

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

Compatibilidade do navegador

Não testei a mim mesmo, mas deve ser suportado a partir do IE8. Pelo menos é o que dizem os truques quirksmode e CSS .

Você pode usar comentários condicionais para aplicar soluções mais antigas / mais lentas, como imagens ou scripts. Melhor ainda, use ambos com<noscript> para as imagens.

HTML :

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

Sobre imagens de fundo

As imagens de fundo são realmente fáceis de manusear, mas ...

1. Suporte de navegador para background-size é, na verdade, apenas a partir do IE9.
2. Cores de texto HTML e especiais ( fontes malucas ) podem fazer muito, com menos solicitações HTTP.
3. Uma solução de script pode simplesmente injetar a Entidade HTML e permitir que o mesmo CSS faça o trabalho.
4. Uma boa redefinição do código CSS pode tornar list-style(a escolha mais lógica) mais fácil.

Aproveitar.

Você pode construí-lo:

#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;
}

Esta é a solução W3C. Você pode usá-lo em 3012!

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

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

As imagens não são recomendadas, pois podem aparecer pixeladas em alguns dispositivos (dispositivos Apple com tela Retina) ou quando ampliadas. Com um personagem, sua lista fica sempre incrível.

Aqui está a melhor solução que encontrei até agora. Funciona muito bem e é compatível com vários navegadores (IE 8+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

O importante é ter o caractere em um bloco flutuante com largura fixa para que o texto permaneça alinhado se for muito longo para caber em uma única linha. 1.2em é a largura que você deseja para o seu personagem, altere-o de acordo com suas necessidades. Não se esqueça de redefinir o preenchimento e a margem dos elementos ul e li.

EDIT: Esteja ciente de que o tamanho "1.2em" pode variar se você usar uma fonte diferente em ul e li: before. É mais seguro usar pixels.

Para adicionar uma estrela, use o caractere Unicode 22C6.

Eu adicionei um espaço para fazer uma pequena lacuna entre a lie a estrela. O código para o espaço é A0.

li:before {
    content: '\22C6\A0';
}

Um exemplo mais completo da resposta de 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Incluí propriedades star-hack para restaurar os estilos de lista padrão em versões mais antigas do IE. Você pode retirá-los e incluí-los em uma inclusão condicional, se desejar, ou substituí-los por uma solução baseada em imagem de plano de fundo. Minha humilde opinião é que os estilos de marcadores especiais implementados dessa maneira devem degradar normalmente nos poucos navegadores que não oferecem suporte a pseudoeletores.

Testado no Firefox, Chrome, Safari e IE8-10 e renderiza corretamente em todos.

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Verifiquei toda a lista e há elementos parcialmente corretos e parcialmente incorretos até 2020.

Descobri que o recuo e o deslocamento eram o maior problema ao usar UTF-8, então estou postando isso como uma solução CSS compatível com 2020 usando o marcador "triângulo vertical" como meu exemplo.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

use emcomo unidade para evitar conflito com o tamanho da fonte

Experimente este código ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Este tópico pode ser antigo, mas aqui está uma solução rápida ul {list-style:outside none square;}ou ul {list-style:outside none disc;}, etc ...

em seguida, adicione preenchimento esquerdo ao elemento da lista

ul li{line-height: 1.4;padding-bottom: 6px;}