这个时候就可以使用first-letter这个伪类来帮忙了:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 渲染结果:
这下,前导符就和文字保持一定距离了,而且能控制的样式也更多一点。
不过前导符后面那个顿号就控制不到样式了,但我想可不可以设置背景图来取代呢?
简单测试却发现,控制first-letter伪类的背景,与控制list-style-image一样让人琢磨不透,遂弃之。
另外,各个浏览器对待前导符旁边的符号处理方式也不一样,因为没有安装Safari,所以没有测试它:
代码:
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
IE8和FF3和Opera表现一致,Chrome只对左侧的符号进行处理,IE6、7就只处理了第一个字符。