十字效果怎么通过:before和:after伪元素做出来？-慕课网

首页课程实战体系课手记专栏慕课教程

十字效果怎么通过:before和:after伪元素做出来？

来源：3-1 3. border-color与color

heisback

2017-05-07 10:21

大神，十字效果怎么通过:before和:after伪元素做出来？

写回答关注

4回答

weixin_慕沐8485017

2020-08-12 13:19:42

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;
    }

0 0
幕布斯6735441

2018-09-19 23:49:48

<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>

0 0
可口可乐的乐

2017-10-30 10:26:59

<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>

0 0
灰色信念

2017-05-08 11:34:44

<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 0