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

求教，十字架是通过伪类after 样式里面哪些样子生成的？

求教，十字架这二条边是怎么通过伪类after里面的样式生成的？content=""，那后面设置border-top样式，这个样式怎么会生成出一条水平边出来？如果border-top是box对象的上边，那为什么box本身的四边不受这个border-top的影响而发生变化？after和before里面的border-top和border-left画出十字架的原理是什么？跪求高手解答一下！谢谢

慕九州5109875

2018-07-12

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

关注问题我要回答

1806

操作

收起

2 回答

小花丶
2018-12-13

<!DOCTYPE HTML>

<html>

<body>

<style>

.add{

position:relative;

width:50px;

height:50px;

border:1px solid;

color:#369;

}

.add:hover{

cursor:pointer;

color:#ff0;

}

.add::before,

.add::after

{

position:absolute;

content:'';

left:50%;

top:50%;

border-top:4px solid;

border-radius:2px;

}

.add::before{

width:30px;

border-top:4px solid;

transform:translate(-50%,-2px);

}

.add::after{

height:30px;

border-left:4px solid;

transform:translate(-2px,-50%);

}

</style>

</body>

</html>

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

收起回答

一如忘词

有一行代码好像多余了，感觉没啥用，就是那个top下面的

2019-12-02 回复有任何疑惑可以回复我~

假蛙工程师

可以用，但是很丑

2024-05-19 回复有任何疑惑可以回复我~

xing_org1
2018-07-23

<div class="add">
</div>

.add{
  position: relative;
  width: 120px;
  height: 120px;
  margin: 200px;
  color: #ccc;
  border: 1px solid;
  transition: color .5s;
}
.add::before,
.add::after{
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
}
.add::before{
  margin-top: -5px;
  margin-left: -30px;
  border-top: 10px solid;
}
.add::after{
  margin-top: -30px;
  margin-left: -5px;
  border-left: 10px solid;
}
.add:hover{
  color: red;
  cursor: pointer;
}

你看看这样的可以不