CSS中如何设置::marker的content图片大小与字体大小相对应

解决方案 #

直接在::marker的content属性中使用url()加载图片的方式无法直接调整图片尺寸，因为::marker伪元素支持的CSS属性范围非常有限，width、height、background等常规尺寸控制属性均不生效，推荐使用兼容度更高、可控性更强的::before伪元素方案实现相对字体自适应的自定义列表标记：

• 第一步：关闭默认的列表标记，给自定义标记留出相对字体大小的占位空间

li {
  list-style: none;
  padding-left: 1.5em; /* 占位空间随字体大小自动缩放 */
  position: relative;
}

• 第二步：用::before伪元素插入自定义图片，尺寸全部使用em单位实现和字体大小绑定

li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em; /* 垂直对齐偏移量随字体大小自动调整 */
  width: 1em; /* 标记宽度 = 1倍当前字体大小，可按需调整比例 */
  height: 1em; /* 标记高度 = 1倍当前字体大小，可按需调整比例 */
  background-image: url("img.png");
  background-size: cover;
  background-repeat: no-repeat;
}

如果一定要保留::marker的实现方式，也可以用transform缩放实现尺寸调整，仅需要修改原有代码如下：

::marker {
  content: url("img.png");
  /* 缩放比例可根据原图尺寸和期望显示大小调整，可结合calc实现和em的绑定 */
  transform: scale(calc(1em / 32)); /* 假设原图尺寸为32px，就可以缩放到1em大小 */
}

注意该方案会保留原图的占位空间，可能需要额外调整列表项的内边距适配，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Enrique Metner