Símbolo de marcador personalizado para <li> elementos em <ul> que são caracteres regulares e não uma imagem

Sei que é possível especificar um gráfico personalizado para ser um caractere de marcador de substituição, usando o atributo CSS:

list-style-image

E então fornecendo um URL.

No entanto, no meu caso, eu só quero usar o símbolo '+'. Não quero criar um gráfico para isso e depois apontá-lo. Prefiro apenas instruir a lista não ordenada a usar um símbolo de adição como símbolo de marcador.

Isso pode ser feito ou sou forçado a torná-lo um gráfico primeiro?

O seguinte é citado em listas de domesticação :

Pode haver momentos em que você tenha uma lista, mas não deseja marcadores ou deseja usar outro caractere no lugar do marcador. Mais uma vez, o CSS fornece uma solução direta. Basta adicionar o estilo de lista: nenhum; de acordo com sua regra e forçar os LIs a serem exibidos com recuos pendentes. A regra será mais ou menos assim:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

O preenchimento ou a margem precisam ser definidos como zero, com o outro definido como 1em. Dependendo do “marcador” que você escolher, pode ser necessário modificar esse valor. O recuo de texto negativo faz com que a primeira linha seja movida para a esquerda nessa quantidade, criando um recuo deslocado.

O HTML conterá nosso UL padrão, mas com qualquer caractere ou entidade HTML que você deseja usar no lugar do marcador anterior ao conteúdo do item da lista. No nosso caso, usaremos », a citação dupla de ângulo direito:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5, vamos demorar
   um pouco mais para que
   ele enrole

Esta é uma resposta tardia, mas me deparei com isso ... Para obter o recuo correto em todas as linhas que envolvem, tente da seguinte maneira:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Tantas soluções.
Mas ainda acho que há espaço para melhorias.

Vantagens:

• código muito compacto
• funciona com qualquer tamanho de fonte
  (sem valores absolutos de pixel)
• alinha perfeitamente as linhas
  (sem ligeira mudança entre a primeira linha e as seguintes)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Esta é a solução W3C. Funciona no Firefox e Chrome.

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

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

ul {
    list-style: none;
    margin-left: 0;
    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 seu personagem, altere-o de acordo com suas necessidades.

Você pode usar o :beforepseudo-seletor para inserir conteúdo na frente do item da lista. Você pode encontrar um exemplo no Quirksmode, em http://www.quirksmode.org/css/beforeafter.html . Eu uso isso para inserir aspas gigantes em torno de blockquotes ...

HTH.

Minha solução usa o posicionamento para obter linhas quebradas automaticamente alinhadas corretamente. Portanto, você não precisa se preocupar em definir o preenchimento - antes:

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

É aconselhável qualificar o estilo do item <li>para que não afete os <ol>itens da lista. Assim:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Font-awesome fornece uma ótima solução pronta para uso:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Em estilo traço:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Eu prefiro usar margem negativa, te dá mais controle

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Curiosamente, eu não acho que nenhuma das soluções postadas seja boa o suficiente, porque elas se baseiam no fato de que o personagem usado tem 1 ponto de largura, o que não precisa ser assim (com exceção da resposta de John Magnolia, que no entanto usa flutuadores que podem complicar as coisas de outra maneira). Aqui está a minha tentativa:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Isso tem essas vantagens (sobre outras soluções):

1. Não depende da largura do símbolo, como você vê no exemplo. Eu usei dois caracteres para mostrar que ele funciona mesmo com marcadores largos. Se você tentar fazer isso em outras soluções, o texto ficará desalinhado (na verdade, é visível até com o símbolo * em zooms mais altos).
2. Dá a você controle total do espaço usado pelas balas . Você pode substituir 30px por qualquer coisa (até 1em etc). Só não se esqueça de mudar nos três lugares.
3. Se lhe der controle total do posicionamento da bala . Basta substituir o text-align: center;por qualquer coisa ao seu gosto. Por exemplo, você pode tentar color: red; text-align: right; padding-right: 5px; box-sizing: border-box; ou se não gosta de brincar com caixas de borda, basta subtrair o preenchimento (5px) da largura (ou seja, largura: 25px neste exemplo). Existem muitas opções.
4. Ele não usa carros alegóricos para que possa ser contido em qualquer lugar.

Aproveitar.

tente isso

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>