十字效果怎么通过:before和:after伪元素做出来？
大神，十字效果怎么通过:before和:after伪元素做出来？
4 回答
li a{
display: block;
width: 100px;
height: 80px;
border: 1px solid;
box-sizing: border-box;
position: relative;
}
a:before{
content: "";
width: 60px;
height: 60px;
border-top: 10px solid;
position: absolute;
top: 35px;
left: 20px;
}
a:after{
content: "";
width: 60px;
height: 60px;
border-left: 10px solid;
position: absolute;
top: 10px;
left: 45px;
}
<a href="javascript:alert('xxx');" class="add"></a>
<style>
.add {
width: 60px;
height: 60px;
border: 1px;
border-style: solid;
color: black;
display: inline-block;
left:50px;
top:120px;
}
.add:hover{
color: blue;
}
.add:after {
content: "";
height: 40px;
border-width: 0 9px 0 0;
border-style: solid;
position: relative;
display: inline-block;
top: 9px;
left: -15px;
}
.add:before {
content: "";
width: 40px;
border-width: 9px 0 0 0;
border-style: solid;
position: relative;
display: inline-block;
top: -6px;
left: 10px;
}
</style>
<style>
.box{color:pink;}
.box:hover{color:blue;}
.box{width: 200px;height: 200px;border:1px solid ;text-align:center;line-height:200px;font-size:0;position:relative;-web-kit-transition: color .25s;}
.box:before{content:"";width: 100px;height: 0;border-top:10px solid;display:inline-block;vertical-align:middle;}
.box:after{content:'';height: 100px;width: 0;border-left:10px solid;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<a></a>
<style type="text/css">
a{
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
display: block;
}
a:before{
content: "";
position: absolute;
width: 100px;
border-top: 10px solid;
margin: 95px 0 0 45px;
}
a:after{
content: "";
position: absolute;
height: 100px;
border-left: 10px solid;
margin: 45px 0px 0px 90px;
}
a:hover{
color: red;
}
</style>
举报
0/150
提交
取消
