Using css instead of background image


Well-known member
I have a list that has a green square. I like to replace the image with css.
Here is the current list


Here is the CSS for the current list where the green square is called from background image and background-position.
.hilite_list li a:link, .hilite_list li a:visited{ 
background: url(images/spriteme1.png) no-repeat left 5px;
                        background-position: -10px -100px;
color: #666;
padding-left: 15px;
line-height: 25px;
Here is css for a simple square with solid color.
.square {
	width: 100px;
	height: 100px;
	background: #fc2e5a;
Is it possible to replace the background-url with this css?


Well-known member
No, the second css is for creating a 100 by 100 square with a background color. You need to redo your html, and have a block before the list item. I would use dl, dt and dd, and apply the green square on the dt, then use dd as list item.
Thanks for the tip.
I couldn't get the underline (border-bottom) to run from dt throughout dd since they are 2 different parts.


Well-known member
It should be possible, make sure there are no margins etc. You can do it with wrapping two <p> in a span as well, it doesn't really require you using any specific type of tag.