微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css li 图标给出双字符

如何解决css li 图标给出双字符

我不知道如何更改此网址中 li 上的图标。

我尝试更改内容,但这只是比绿色 v 多出一个数字。

https://codepen.io/gnevin/pen/axNVex

.check-list {
  margin: 0;
  padding-left: 1.2rem;
}

.check-list li {
  position: relative;
  list-style-type: none;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

.check-list li:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 11px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #00a8a8;
    transform-origin: bottom left;
    transform: rotate(45deg);
}





解决方法

这里使用边框和变换用于旋转。如果你想改变,还有更多的方法。首先去掉边框,在内容中放上你想要的,默认样式使用List样式

enter image description herek.imgur.com/gwikL.png

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。