【css】自定义列表项标记（图片、符号、表情）

1. 列表项标记是图片

ul{
  li {
    list-style: none;
    padding-left: 20px; /* 设置左边距，以容纳图标 */
    display: flex;
    align-items: center;/* 使小图标和文字高度对齐 */
  }

  li::before {
    content: '';
    display: inline-block;
    width: 20px; /* 设置容器宽度 */
    height: 20px; /* 设置容器高度 */
    background: url(./f.png) no-repeat center center; /* 设置背景图片样式 */
    background-size: contain; /* 确保图片适应容器 */
    margin-right: 8px; /* 可选：设置图标与文本之间的间距 */
  }
}

      <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
      </ul>

2. 列表项标记是输入法符号

方法1：

ul{
  padding-left: 10px;
  li{
    list-style-type: '*';
    padding-left: 2px;/* 图标与文字有一些间隔 */
  }
  ::marker{
    color: red;/* 设置列表项颜色 */
  }
}

方法2：

ul{
  padding-left: 10px;
  ::marker{
    content:'*' ' ';
    color: red;/* 设置列表项颜色 */
  }
}

::marker 是 CSS 伪元素，用于设置列表项（list item）的标记符号，可以自定义列表项标记的样式，例如无序列表（<ul>）或有序列表（<ol>）中的项目符号或数字。

注意：::marker 是与文本相关的 CSS 属性，可以在里面设置字体大小（font-size）和颜色（color）等，但是padding和margin是不起效果的。
使用默认的项目标记（disc, decimal等）<ul>或<ol> 会默认有40px的padding-inline-start。

但自定义列表项标记是没有最小间隔的。
所以，想让列表项标记和文字之间留出一些间隙，可以给 <ul>设置padding-left 或者content的第二个参数设为' '。

3. 列表项标记是输入法表情

这种方法就更简单了，直接改变 list-style-type

ul{
  padding-left: 10px;
  li{
    list-style-type: '💜';
    padding-left: 2px;/* 图标与文字有一些间隔 */
  }
}

推荐阅读：https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/