Devo usare, ad esempio, il simbolo della stella (★) come punto elenco per un elemento dell'elenco.

Ho letto il modulo CSS3: Elenchi , che descrive come utilizzare il testo personalizzato come punti elenco , ma non funziona per me. Penso che i browser semplicemente non supportino lo ::markerpseudo elemento.

Come posso farlo senza utilizzare le immagini?

MODIFICARE

Probabilmente non consiglierei più di usare le immagini. Mi atterrei all'approccio di usare un carattere Unicode, come questo:

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

VECCHIA RISPOSTA

Probabilmente sceglierei uno sfondo per immagini, sono molto più efficienti, versatili e cross-browser-friendly.

Ecco un esempio:

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

Usare il testo come punti elenco

Utilizzare li:beforecon un'entità HTML esadecimale con escape (o qualsiasi testo normale).

Esempio

Il mio esempio produrrà elenchi con segni di spunta come punti elenco.

CSS :

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

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

Compatibilità del browser

Non ho testato me stesso, ma dovrebbe essere supportato da IE8. Almeno questo è quello che dicono quirksmode e css-tricks .

È possibile utilizzare commenti condizionali per applicare soluzioni più vecchie / lente come immagini o script. Meglio ancora, usa entrambi con<noscript> per le immagini.

HTML :

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

Informazioni sulle immagini di sfondo

Le immagini di sfondo sono davvero facili da gestire, ma ...

1. Supporto del browser per background-size è in realtà solo a partire da IE9.
2. Colori del testo HTML e speciali ( crazy ) possono fare molto, con meno richieste HTTP.
3. Una soluzione di script può semplicemente iniettare l'entità HTML e lasciare che lo stesso CSS faccia il lavoro.
4. Un buon ripristino del codice CSS potrebbe rendere list-style(la scelta più logica) più facile.

Godere.

Puoi costruirlo:

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

Questa è la soluzione W3C. Puoi usarlo nel 3012!

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

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

Le immagini non sono consigliate poiché possono apparire pixelate su alcuni dispositivi (dispositivi Apple con display Retina) o quando vengono ingrandite. Con un personaggio, la tua lista è sempre fantastica.

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

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, cambiala in base alle tue esigenze. Non dimenticare di reimpostare il riempimento e il margine per gli elementi ul e li.

EDIT: Tieni presente che la dimensione "1.2em" può variare se usi un carattere diverso in ul e li: prima. È più sicuro usare i pixel.

Per aggiungere una stella usa il carattere Unicode 22C6.

Ho aggiunto uno spazio per fare un piccolo spazio tra la lie la stella. Il codice per lo spazio è A0.

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

Un esempio più completo della risposta di 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;
}

Ho incluso proprietà star-hack per ripristinare gli stili di elenco predefiniti nelle versioni precedenti di IE. È possibile estrarli e includerli in un'inclusione condizionale, se lo si desidera, o sostituirli con una soluzione basata su immagine di sfondo. La mia modesta opinione è che gli stili di proiettile speciali implementati in questo modo dovrebbero degradarsi con grazia sui pochi browser che non supportano gli pseudoselettori.

Testato in Firefox, Chrome, Safari e IE8-10 e viene visualizzato correttamente in tutti.

ul {
    list-style-type: none;    
}

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

Ho esaminato l'intero elenco e ci sono elementi parzialmente corretti e parzialmente errati fino al 2020.

Ho scoperto che il rientro e l'offset erano il problema più grande quando si utilizza UTF-8, quindi lo sto pubblicando come una soluzione CSS compatibile con il 2020 utilizzando il punto elenco "triangolo verticale" come esempio.

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
}

utilizzare emcome unità per evitare conflitti con il dimensionamento dei caratteri

Prova questo codice ...

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

Questo argomento potrebbe essere vecchio, ma ecco una soluzione rapida ul {list-style:outside none square;}o ul {list-style:outside none disc;}, ecc ...

quindi aggiungi il riempimento sinistro all'elemento dell'elenco

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