Bugzilla

One thing worth noting is that `list-style-image` inherits to the nearest <xul:image> child, whereas `content` works directly on the element it's being applied on.

For instance:

```
<box style="list-style-image: url(foo)">
  <image id="1"/>
  <image id="2"/>
  <image id="3"/>
</box>
```
list-style-image applies to all 3 XUL images in this case, but has no effect on the `box` itself.

```
<div style="content: url(http://placekitten.com/300/300)">
  <img id="1" src="http://placekitten.com/300/200"/>
  <img id="2" src="http://placekitten.com/300/400"/>
  <img id="3" src="http://placekitten.com/300/500"/>
</div>
```
The `content` on `div` will essentially replace all 3 children in this case.

It should still be possible however to replace `list-style-image` with `content` by being more careful about the selectors being used (eg. setting `content` on `#back-button > .toolbarbutton-icon` as opposed to just `#back-button`, and similarly elsewhere...).

One thing worth noting is that `list-style-image` inherits to all its children, but only has an effect on actual XUL images, whereas `content` works directly on the element it's being applied on.

For instance:

```
<box style="list-style-image: url(foo)">
  <image id="1"/>
  <image id="2"/>
  <image id="3"/>
</box>
```
list-style-image applies to all 3 XUL images in this case, but has no effect on the `box` itself.

```
<div style="content: url(http://placekitten.com/300/300)">
  <img id="1" src="http://placekitten.com/300/200"/>
  <img id="2" src="http://placekitten.com/300/400"/>
  <img id="3" src="http://placekitten.com/300/500"/>
</div>
```
The `content` on `div` will essentially replace all 3 children in this case.

It should still be possible however to replace `list-style-image` with `content` by being more careful about the selectors being used (eg. setting `content` on `#back-button > .toolbarbutton-icon` as opposed to just `#back-button`, and similarly elsewhere...).