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

最新推荐文章于 2025-05-13 17:44:16 发布

白桃与猫

最新推荐文章于 2025-05-13 17:44:16 发布

阅读量1.2k

点赞数 7

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52395343/article/details/135933839

版权

博客介绍了使用CSS自定义列表项标记样式的方法，包括将列表项标记设为图片、输入法符号和输入法表情。还提到CSS伪元素可设置列表项标记符号，以及相关属性设置的注意事项，如与文本相关属性的效果、间隔设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 列表项标记是图片

在这里插入图片描述

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

  li::before {
   
    content: '';
    display: inline-block;
    width: 20px;