[CSS] 利用CSS3伪类制作上传按钮

html

 <div class="ille-upload"> </div>

css

.ille-upload{
    
    
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    margin-top: 40px;
    margin-left: 16px;
    position: relative;
}
.ille-upload:before{
    
    
    content: " ";
    position: absolute;
    top: 10px;
    left: 50px;
    width: 2px;
    height: 80px;
    background-color: #eee;
}
.ille-upload:after{
    
    
    content: "";
    position: absolute;
    top: 50px;
    left: 10px;
    width: 80px;
    height: 2px;
    background-color: #eee;
}

CSS中 :after与::after有什么区别？

其实 :after与::after原理相同

相同之处

两者都是css的伪元素，都可以在元素内容的前面添加内容
两者的写法是等价的，也就是 :before ==::before

不同之处

:befor是css2的写法，::before是css3的写法，css3中是为了区分伪类选择器，比如:hover等
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

原文链接：CSS :before和::before的区别

参考链接：

CSS3实现32种基本图形