css3列表图标
时间2023-09-21 04:05:03发布访客分类CSS浏览940
导读：CSS3列表图标，是CSS3中一个非常有用的特性，它允许我们为列表项添加各种图标，从而使我们的页面更加美观动人。下面是一些用于CSS3列表图标优化的代码片段。首页新闻产品联系我们/*实心圆点*/ul li {list-style-type:...
CSS3列表图标，是CSS3中一个非常有用的特性，它允许我们为列表项添加各种图标，从而使我们的页面更加美观动人。下面是一些用于CSS3列表图标优化的代码片段。
/*实心圆点*/ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-radius: 50%;
width: 10px;
height: 10px;
background: #000;
position: absolute;
left: 0;
top: 6px;
}
/*空心圆点*/ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-radius: 50%;
width: 10px;
height: 10px;
border: 2px solid #000;
position: absolute;
left: 0;
top: 6px;
}
/*向右箭头*/ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-style: solid;
border-width: 0.2em 0 0 0.2em;
display: inline-block;
height: 0.5em;
left: 0;
top: 0.9em;
position: absolute;
transform: rotate(45deg);
width: 0.5em;
}
/*向下箭头*/ul li {
list-style-type: none;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
line-height: 20px;
}
ul li:before {
content: '';
border-style: solid;
border-width: 0.2em 0.2em 0 0;
display: inline-block;
height: 0.5em;
left: 0.2em;
top: 0.3em;
position: absolute;
transform: rotate(45deg);
width: 0.5em;
}
通过使用上述代码片段，我们可以方便地为自己的列表项添加不同风格的图标，使页面更加美观动人。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css3列表图标
本文地址： https://pptw.com/jishu/451608.html
