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

个回答

小花丶

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>

1

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

你看看这样的可以不

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

个回答

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