Using css instead of background image

[Andy.N]

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.
http://3easy.org/buildmobile/jquerymobile/#square_css

.square {
	width: 100px;
	height: 100px;
	background: #fc2e5a;
}

Is it possible to replace the background-url with this css?
Thanks

 

[MagnusB]

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.

http://www.w3schools.com/tags/tag_dl.asp
http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line

 

[Andy.N]

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.

http://www.w3schools.com/tags/tag_dl.asp
http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line

Thanks for the tip.
I couldn't get the underline (border-bottom) to run from dt throughout dd since they are 2 different parts.

 

[MagnusB]

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.