CSS li标签默认点改成自定义图

TWICE-Nayeon

于 2023-07-25 11:14:27 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/qq_53131684/article/details/131913353

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS li标签默认点改成自定义图

一般默认的都是小点：

小点点
- 还是小点点

想要自己自定义css li标签比如想要改成svg图（其他同理），可以用伪类写，代码如下：

    li {
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 15px;
            margin-left: 5px;
            position: relative;

            &::before {
              content: '';
              display: inline-block;
              //自定义的图片，此处可以换成自己需要的链接，要保证链接路径正确。
              background-image: url('../images/right.svg'); 
              background-repeat: no-repeat;
              background-position: center;
              border-radius: 0;
              background-color: transparent;
              width: 20px;
              height: 20px;
              position: absolute;
              top: 4px;
              left: -6px;
            }
          }