若想实现这个效果， 只需一个div元素即可搞定。需要用到css的为了before和after， 以及border特性。

先设置一个div便签

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

.add {

  border: 1px solid;

  width: 100px;

  height: 100px;

  color: #ccc;

  transition: color .25s;

  position: relative;

}

我们可以利用伪类before和其border-top来设置一个“横”：

.add::before{

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  width: 80px;

  margin-left: -40px;

  margin-top: -5px;

  border-top: 10px solid;

}

注意我们使了绝对定位。

参照上面，我们可以使用after伪类和border-bottom设置一个“竖”：

.add::after {

 content: '';

 position: absolute;

 left: 50%;

 top: 50%;

 height: 80px;

 margin-left: -5px;

 margin-top: -40px;

 border-left: 10px solid;

}

在加上hover伪类，设置鼠标悬浮上去的颜色：

.add:hover {

  color: blue;

}

转载请注明：谷谷点程序 » css样式画加号和减号（+和-）效果