Custom List Bullets with :before

Question

I'm creating a form which has the following section:

My approach for the Activities and Objects sections was to create those options 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'd like to be able to create the colored blocks as if they were the bullets of the list, either using a custom list-style (not images), or using the :before 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 accomplish something this using CSS? This isn't working.

HERE'S A FIDDLE.

Jidda

Answer 1

I figured out the solution. Apparently I had the correct code, but all I needed to do was add

display:inline-block;

The following is correct:

    .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;            
    }​

Jidda

Answer 2

tweak on 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 the square

float: left avoid it sending the text on the next line

margin-right: avoid text being too close to the square

you have to tweak a lot to fit your style and situation :) but the key element was the "display block" missing

Fenner

This is what I figured out! Thanks for the answer. I'll give you an upvote :) – Jidda

thanks :) and it's better for you to figure out things than for me having an accepted answer hehe :) – Fenner