Custom List Bullets with :before
Solution 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;
}
Solution 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
Comments
-
Jon almost 2 years
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.