Custom list templates from: to

Question

I create a form that has the following section:

My approach to the Actions and Objects sections was to create these parameters using a list.

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

I would like to be able to create colored blocks as if they were bullets in a list, either using a custom list style (not images) or using: in front of the selector. Essentially something like this:

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

How can I do something using CSS? This does not work.

HERE FIDDLE.

Answer 1

I understood the solution. Apparently I had the correct code, but all I had to do was add

 display:inline-block; 

Right:

  .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

change this a bit:

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

why?

display: block allows you to see a square

float: left to not send text on the next line

margin-right: avoid squaring text too close

you need to adjust a lot to fit your style and situation :), but the key element was the missing “display unit”