【实用随记】纯CSS画icon

最新推荐文章于 2024-11-12 11:49:03 发布

原创最新推荐文章于 2024-11-12 11:49:03 发布 · 552 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS的:before和:after伪元素来创建图标的方法，这种方法可以减少HTML中div标签的使用，使得代码更加简洁。通过具体实例详细展示了如何定义这些伪元素的样式来实现特定图标效果。

给：after ：before 分别定义样式

避免产生过多的DIV

例如 download-ICON

html:

css:

.icon{
display: block;
float: left;
font-size: 64px;
height: 64px;
line-height: 64px;
margin-bottom: 32px;
margin-left: 0px;
margin-right: 48px;
margin-top: 0px;
position: relative;
width: 64px;
}

.download{
position: absolute;
top: 0;
height: 35px;
width: 20px;
background-color: rgb(102, 102, 102);
}
.download:before{
content: "";
width: 0;
height: 0;
border-width: 20px;
position: absolute;
top: 30px;
left: -10px;
border-style: solid;
border-color: rgb(102, 102, 102) transparent transparent transparent ;
}
.download:after{
content: "";
width:41px;
height: 5px;
border-width: 0 10px 10px 10px;
position: absolute;
border-style:solid;
top: 50px;
left: -20px;
}