elenco personalizzato Richiami con: prima

Question

Sto creando una forma che ha la seguente sezione:

Il mio approccio per le attività e oggetti sezioni era quello di creare quelle opzioni che utilizzano un elenco.

<div class="formBlock"> 
    Activities 
    <ul id="coloringAct"> 
     <li>Activity Type A</li> 
     <li>Activity Type B</li> 
     <li>Activity Type C</li> 
    </ul> 
</div> 

Mi piacerebbe essere in grado di creare i blocchi colorati come se fossero i proiettili della lista, sia utilizzando un elenco in stile personalizzato (non immagini), oppure utilizzando la: prima di selettore. Essenzialmente, qualcosa del genere:

#formTable tr td .formBlock li { 
    list-style:none; 
    margin:0; 
    padding:0; 
    border-top:1px solid #DDD; 
} 
#formTable tr td .formBlock li:before { 
    content: ""; 
    width:20px; 
    height:20px; 
    background:red; 
} 

Come posso realizzare qualcosa usando questo CSS? Questo non funziona

HERE'S A FIDDLE.

Answer 1

Ho trovato la soluzione. A quanto pare ho avuto il codice corretto, ma tutto quello che dovevo fare era aggiungere

display:inline-block; 

Quello che segue è corretto:

.formBlock { 
     float:left; 
     background-color:#f5f5f5; 
     padding:0px 10px 0px 10px; 
     color:#627686; 
     line-height:32px; 
     overflow:hidden; 
     width:150px; 
     border-radius:5px; 
     margin-right:15px; 
    } 
    .formBlock li { 
     list-style:none; 
     margin:0; 
     padding:0; 
     border-top:1px solid #DDD; 
    } 
    .formBlock li:before { 
     display:inline-block;   
     content: ""; 
     width:10px; 
     height:10px; 
     background:red;  
     margin-right:5px;    
    }​ 

Answer 2

Tweak su questo un po ':

formTable tr td .formBlock li:before { 
    content: ""; 
    width:20px; 
    height:20px; 
    background:red; 
    display: block; 
    float: left; 
    margin-right: 5px; 
} 

perché?

display: block permette di vedere la piazza

float: left evitarlo l'invio del testo sulla riga successiva

margin-right: evitare di testo di essere troppo vicino alla piazza

voi devo modificare molto per adattarlo al tuo stile e alla situazione :) ma l'elemento chiave era il "blocco di visualizzazione" mancante