css用伪元素压线

html结构

 

css代码：

@charset "utf-8";
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    margin: auto;
    width: 1200px;
}
li{
    float: left;
    width: 300px;
    height:100px ;
    border: 1px solid #ccc;
    margin: 20px 40px;
    position: relative;
}
.cf::after{
    content: '';
    display: inline-block;
    clear: both;
}


ul .local::after{
    display: inline-block;
    /* 要将伪元素设置为行内块或者块才可以设置宽度和高度
    content必须要有一个空的属性值 */
    content: '';
    width: 70px;
    height: 70px;
    background: url(../images/local.png) no-repeat;
    background-position: 10px 10px;
    /* 图片的原本的大小只有50px 50px 这里设置的70px是
    为了给伪元素添加一个白色背景，多出来的白色才可以将压住两边的边框 */
    background-color: #fff;
    /* 利用子绝父相定位来将伪元素移到自己想要的位置 */
    position: absolute;
    left: 40%;
    bottom: -30px;
}
ul .tel::after{
    display: inline-block;
    content: '';
    width: 70px;
    height: 70px;
    background: url(../images/tel.png) no-repeat;
    background-position: 10px 10px;
    background-color: #fff;
    position: absolute;
    left: 40%;
    bottom: -30px;
}
ul .phone::after{
    display: inline-block;
    content: '';
    width: 70px;
    height: 70px;
    background: url(../images/earth.png) no-repeat;
    background-position: 10px 10px;
    background-color: #fff;
    position: absolute;
    left: 40%;
    bottom: -30px;
}

运行效果图：