将list-style-type修改为任意的字符

从CSS级别2开始，CSS list-style-type支持诸如disc或小数之类的关键字来定义列表项标记的外观。

可以将Chrome设置为任意字符串，该功能可以在Chrome 79以及39版本以后在Firefox中使用。

该属性具有兼容性问题，请注意你的浏览器是否符合上述标准。

实现方法：

html：

<h1>CSS <code>list-style-type: <string></code> Demo</h1>

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
</ul>

<div class="warning">
  <p>⚠️ Your browser does not support <code>list-style-type: <string></code>. In a browser with support the list bullets would be `★` instead of the default dot.<br />Browsers with support: Chrome 79 Canary, Firefox 39</p>
</div>

CSS：

ul {
  list-style-type: '★';
}

.warning {
  padding: 1em;
  border: 1px solid #ccc;
}

.warning p {
  margin: 0;
  padding: 0;
}
//判断是否兼容
@supports(list-style-type: '★') {
  ul + .warning {
    display: none;
  }
}

注意如果不兼容，我们还可以为每一个li设置::before来达到相同的目的。