                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之border

hover与图形变色

老师你好！十字图形里面的十字是用伪类生成了能不能麻烦贴下完整代码非常感谢自己做了一上午没做出来

龙晓秀

2016-11-16

源自：CSS深入理解之border 3-1

关注问题我要回答

1811

操作

收起

1 回答

沧伤微夏弃流年回答被采纳 +3 积分
2016-11-17

不一样，before是在元素之前插入，after是在元素之后插入

1 回复有任何疑惑可以回复我~

收起回答

龙晓秀提问者

好的我去看下非常感谢回答！

2016-11-17 回复有任何疑惑可以回复我~

沧伤微夏弃流年
2016-11-16

.add{ color:#ccc; transition:color .25s; border:2px dashed; padding:40px; text-align:center;display:inline-block; position:relative}
.add:before{ border-top:8px solid; content:""; width:60px; display:inline-block; position:absolute; left:10px; top:36px;}
.add:after{ border-left:8px solid; content:""; height:60px;display:inline-block;position:absolute; left:36px; top:10px;}
.add:hover{color:#09F;}

不太简洁，请参考，要是能优化告诉我哦~~~

4 回复有任何疑惑可以回复我~

收起回答

Qzhor

谢谢，以前没写过伪元素

2016-11-16 回复有任何疑惑可以回复我~

Qzhor 回复 Qzhor

这里的before和after是一样的作用？

2016-11-16 回复有任何疑惑可以回复我~

龙晓秀提问者回复 Qzhor

同学伪元素应该还是非常多的可以去看看不错的呵呵

2016-11-17 回复有任何疑惑可以回复我~