list-style-image not applied properly in .accordion .accordion-title

Question

I'm trying apply this CSS property:

.accordion .accordion-title {
    list-style-image: url("images/btn_mas.png") !important;
}

To each h3.accordion-title inside div.accordion on this page . The idea is to have something like this:

Where LI items gets a image and that image change on hover for another one lets said for one called btn_menos.png but I can't get it to work as you can see on the page. What I'm doing wrong? Any advice? How Ic can achieve that?

Note: I can't change how the HTML for the item is generated so it's required to work with that markup

Answer 1

You cant add list-style-image to an h3 . Those are reserved for li tags. What you should do instead is add the image as a background to the the span that wraps that text like so:

.accordion .accordion-title span {
    color: #868a8c;
    text-decoration: none;
    background: url(images/btn_mas.png) no-repeat 0px 8px; //add
    padding: 0 0 0 25px; //add
}