用CSS做一个加号

用CSS做一个加号

.add {
  display: inline-block;
  height: 100px;
  width: 100px;
  text-align: center;
  border: 2px solid #888888;
  margin: 20px 0;
  position: relative;
}
.add::after {
  position: absolute;
  height: 2px;
  width: 50%;
  content: '';
  background-color: #888888;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.add::before {
  position: absolute;
  height: 50%;
  background-color: #888888;
  width: 2px;
  content: '';
  top: 50%;
  transform: translateY(-50%);
}

• 最终效果如下

  
  
  1.png