十字效果怎么通過:before和:after偽元素做出來？
大神，十字效果怎么通過:before和:after偽元素做出來？
heisback
2017-05-07
4 回答
舉報
0/150
提交
取消
2020-08-12
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;
????}
2018-09-19
<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>
2017-10-30
<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>
2017-05-08
<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>