手写经过li时加一层+

1.

2..tab-ul li{

padding-left:32px;

width:78px;

height:34px;

line-height:34px;

margin-bottom:10px;

color:white;

font-size:14px;

position:relative;

overflow:hidden;

cursor:pointer;

.addIcon{

display:none;

position:absolute;

left:0;

bottom:0;

width:100%;

height:100%;

background-color:rgba(0,0,0,.5);

&::after,&::before{

content:'';

position:absolute;

left:50%;

top:50%;

width:15px;

height:3px;

background-color:#fff;

transform:translate(-50%, -50%);

-webkit-transform:translate(-50%, -50%);

}

&::before{

height:15px;

width:3px;

}

}

&:hover .addIcon{

display:block;

}

&.li1{

background:url("../images/icon1.png")no-repeat 10px center #00C88F;

}

&.li2{

}

&.li3{

}

&.li4{

}

}

3.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,919评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,307评论 0 8
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,678评论 0 0
  • 浏览器基本结构 浏览器结构一般包括如下:1.用户界面(User Interface):用户所看到的界面,并且与之交...
    losspm阅读 2,682评论 0 0
  • 今天是我正式踏上工作岗位的第一天,在加班之后准备跟大家聊聊心态。 其实我在去年有来单位实习过,我工作的地方...
    游弋恶灵阅读 3,613评论 2 2

友情链接更多精彩内容