html用伪类制作表格,伪类制作小图标.html

伪类制作小图标

ul,li{list-style: none;}

li{

width:300px;

height: 30px;

line-height: 30px;

text-align: center;

border:1px solid #000;

margin-bottom: 10px;

}

li:first-child:before{

content: '';

height:0;

border:10px solid transparent;

border-left:10px solid #f00;

display: inline-block;

position: relative;

top:3px;

}

li:last-child:before{

content: '';

height:0;

border:10px solid transparent;

border-left:10px solid #f00;

display: inline-block;

position: relative;

top:3px;

}

li:last-child:after{

content: '';

border: 8px solid transparent;

border-left: 10px solid #fff;

display: inline-block;

position: relative;

top: 1px;

left: -53px;

}

• 首页
• 分类

一键复制

编辑

Web IDE

原始数据

按行查看

历史