html - 使用 :before (or similar) to insert dynamic coloured icon before LI

Question

我有一个非常复杂的问题。我有一个 UL，里面有一些 LI。

我需要在 LI 元素之前插入一个图标。

图标需要由两部分组成，一个是具有简单形式的 PNG 图像，另一个是具有动态背景颜色的外形。

具体来说应该是一个圆圈，里面有一个简单的图标。圆圈背景需要能够用代码改变。

我现在解决它的方法是在 LI 元素和设置中使用 SPAN:

height: 20px;
width: 20px;
background: url(icon.png) 2px 2px no-repeat red;
border-radius: 20px

问题是我必须在每个 LI 中放置一个 SPAN，这不是一个选项。我需要以某种方式解决这个问题，所以我有一个“干净”的 UL，里面只有 LI。

这是我现在拥有的:

<ul>
<li><span></span>Some text</li>
</ul>

虽然里面除了 LIs 和 text 不能有任何其他元素，所以我需要它看起来像这样:

<ul>
<li>Some text</li>
</ul>

感谢任何帮助!提前致谢!

Answer 1

我会使用 CSS Sprite 。 http://jsfiddle.net/mCGXv/