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

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

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

慕九州5109875

2018-07-12 21:10

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

写回答关注

2回答

小花丶

2018-12-13 17:36:49

<!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>
<div class="add"></div>
</body>
</html>

2 1

假蛙工程师

可以用，但是很丑

2024-05-19 14:13:01

共 2 条回复 >

xing_org1: 2018-07-23 13:28:25

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

你看看这样的可以不