当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 | .add::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
margin-top: -5px;
border-top: 10px solid;
}
|
注意我们使了绝对定位。 此时变成了这样：
参照上面， 我们可以使用after伪类和border-bottom设置一个“竖”：
1 2 3 4 5 6 7 8 9 10 | .add::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 80px;
margin-left: -5px;
margin-top: -40px;
border-left: 10px solid;
}
|
在加上hover伪类，设置鼠标悬浮上去的颜色：
最终的样式：
当鼠标悬浮上去是， 会变色：
以上就是纯css实现加号一个的效果（代码示例）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
如何使用内嵌式引入css样式表
css的类选择器是怎么样的（代码）
介绍 javascript 代码加不加分号有什么区别
css导航条菜单的实现（附源码）
css为什么加了top移动不了
html怎么调用css文件
css无法显示图片怎么办
css top属性怎么用
html代码什么意思？
css是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 纯css实现加号一个的效果（代码示例）
