使用伪类搭配unicode来实现箭头,可以免去一些常见图片的加载,做起来也很方便
实现效果如下图所示
做法:
1.搜索需要的unicode,我使用的网站是unicode字符百科
2.复制需要字符的css代码
3.写代码,原来的元素定位relative
,伪类绝对定位
li{
padding-left: .5rem;
position: relative;
}
li:after{
content: "\u1433";
position: absolute;
right: .5rem;
font-size: .3rem;
}
// 左边的图标相关代码,左边图标还是需要引入的
li:nth-of-type(1){
background: no-repeat url('./icon.png');
background-size: 0.3733rem 0.3733rem;
background-position: left center;
}
li:nth-of-type(2){
...省略
}
li:nth-of-type(3){
...省略
}