Simbolo di punto elenco personalizzato per <li> elementi in <ul> che è un carattere normale e non un'immagine

Mi rendo conto che è possibile specificare una grafica personalizzata come carattere di sostituzione del punto elenco, utilizzando l'attributo CSS:

list-style-image

E poi dandogli un URL.

Tuttavia, nel mio caso, voglio solo usare il simbolo "+". Non voglio dover creare un'immagine per questo e poi indicarla. Preferisco semplicemente istruire l'elenco non ordinato di utilizzare un simbolo più come simbolo del punto elenco.

Può essere fatto o sono costretto a renderlo prima un grafico?

Quanto segue è citato da Taming Lists :

Ci possono essere momenti in cui hai un elenco, ma non vuoi proiettili o vuoi usare qualche altro carattere al posto del proiettile. Anche in questo caso, CSS fornisce una soluzione semplice. Aggiungi semplicemente lo stile elenco: nessuno; alla tua regola e costringi gli elenchi a visualizzare con rientri sporgenti. La regola sarà simile a questa:

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

O il padding o il margine devono essere impostati a zero, con l'altro impostato a 1em. A seconda del "punto elenco" scelto, potrebbe essere necessario modificare questo valore. Il rientro di testo negativo fa sì che la prima riga venga spostata a sinistra di tale importo, creando un rientro sporgente.

L'HTML conterrà il nostro UL standard, ma con qualsiasi carattere o entità HTML che desideri utilizzare al posto del punto che precede il contenuto dell'elemento dell'elenco. Nel nostro caso useremo », la virgoletta del doppio angolo retto:».

»Articolo 1
» Articolo 2
»Articolo 3
» Articolo 4
»Articolo 5 faremo
   un po 'più di tempo in modo che
   si avvolga

Questa è una risposta tardiva, ma mi sono appena imbattuto in questo ... Per ottenere il rientro corretto su tutte le righe che vanno a capo, prova in questo modo:

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

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

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

Tante soluzioni.
Ma penso ancora che ci siano margini di miglioramento.

vantaggi:

• codice molto compatto
• funziona con qualsiasi dimensione del carattere
  (nessun valore pixel assoluto contenuto)
• allinea perfettamente le righe
  (nessun leggero spostamento tra la prima riga e le righe successive)

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>

Questa è la soluzione W3C. Funziona in 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>

Ecco la migliore soluzione che ho trovato finora. Funziona benissimo ed è cross-browser (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;
}

L'importante è avere il carattere in un blocco mobile con una larghezza fissa in modo che il testo rimanga allineato se è troppo lungo per stare su una singola riga. 1.2em è la larghezza che desideri per il tuo personaggio, modificala in base alle tue esigenze.

Puoi usare il file :before pseudo-selettore per inserire il contenuto davanti all'elemento dell'elenco. Puoi trovare un esempio su Quirksmode, all'indirizzo http://www.quirksmode.org/css/beforeafter.html . Lo uso per inserire citazioni giganti attorno a blockquotes ...

HTH.

La mia soluzione utilizza il posizionamento per allineare automaticamente le linee avvolte correttamente. Quindi non devi preoccuparti di impostare il padding proprio su li: prima.

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>

È consigliabile qualificare lo stile di in <li>modo che non influisca sugli <ol>elementi dell'elenco. Così:

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 offre un'ottima soluzione pronta all'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>

Stile del trattino:

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

Preferisco usare il margine negativo, ti dà più controllo

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

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

È interessante notare che non credo che nessuna delle soluzioni pubblicate sia abbastanza buona, perché si basano sul fatto che il carattere utilizzato è largo 1em, il che non deve essere necessariamente così (con forse l'eccezione della risposta di John Magnolia che tuttavia utilizza float che possono complicare le cose in un altro modo). Ecco il mio tentativo:

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>

Questo ha questi vantaggi (rispetto ad altre soluzioni):

1. Non si basa sulla larghezza del simbolo come si vede nell'esempio. Ho usato due caratteri per dimostrare che funziona anche con proiettili larghi. Se provi questo in altre soluzioni ottieni il testo disallineato (infatti è anche visibile con il simbolo * negli zoom più alti).
2. Ti dà il controllo totale dello spazio utilizzato dai proiettili . Puoi sostituire 30px con qualsiasi cosa (anche 1em ecc.). Basta non dimenticare di cambiarlo su tutti e tre i posti.
3. Se ti dà il controllo totale del posizionamento del proiettile . Basta sostituire text-align: center;con qualcosa di tuo gradimento. Ad esempio puoi provare color: red; text-align: right; padding-right: 5px; box-sizing: border-box; o se non ti piace giocare con il border-box, sottrai semplicemente il padding (5px) dalla larghezza (es. Larghezza: 25px in questo esempio). Ci sono molte opzioni.
4. Non utilizza float quindi può essere contenuto ovunque.

Godere.

prova questo

    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>