CSS - 使用字符作为列表标记

Question

使用CSS，我如何将类似于“►”的字符设置为HTML列表的标记？

- Web_Designer

---

我相信你需要将它转换为图像。 - ayyp

Answer 1

在CSS中使用所需字符的十六进制值，如下所示：

ul li:before { 
   content: "\25BA";  /* hex of your actual character, found using CharMap */
}

< p > 注意: 这不适用于 IE < 8

< p > 示例: http://jsfiddle.net/mrchief/5yKBq/

< p > 要在项目符号后添加空格: content:"\25BA" " ";
示例

< p > 您还可以使用像这样的图片：

ul {
   list-style: disc url(bullet.gif) inside;
}

- Mrchief

---

由于编码问题，即使是使用字符本身 Also work using the character itself 也可能出现工作异常的情况。 - Kraz

@Kraz：没错，这就是为什么我没有提到它。不过还是值得一试的。 - Mrchief

如果你想调整间距，最好在 :before 上使用 margin-right。 - mu is too short

Answer 2

另外，如果您需要在IE<8中使用此功能，可以使用以下表达式：

UL LI:before,
UL LI .before {
    content: "►"
    /* Other styles for this pseudo-element */
}

/* Expression for IE (use in conditional comments)*/
UL LI {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="before">►</span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

- kizu

---

谢谢，但我对Behaviors、expressions、htc文件、!important规则、hacks、使用表格来呈现非表格数据等方面并不太熟悉。 - Web_Designer

表达式其实并不那么糟糕。如果您使用“一次性运行”来覆盖表达式所在的属性，并将表达式函数放置在一个.js文件中，这将成为解决IE中许多问题的好方法。 - kizu