.add{

  width:100px;

  height:100px;

  border:1px solid;

  color:#ccc;

  transition:color 0.25s;

  position:relative;

}

.add:before{

content:" ";

      display:block;

  width:60px;

  height:10px;

  border-color:#ccc;

  border-top:10px solid;

  position:absolute;

  top:50%;

  left:50%;

  margin: -5px 0 0 -30px ;

}

.add:after{

  content:" ";

  display:block;

  width:10px;

 height:60px;

  border-color:#ccc;

  border-left:10px solid;

  position:absolute;

  top:50%;

  left:50%;

  margin:-30px 0 0 -5px;

}

.add:hover{

  color:#f6c;

}

还是很感谢你，你说的我都能理解，现在我遇到的问题是按照老师说的去做  .add{color:#f6c;}，只会实现边框的变色，而不会使里面的内容跟着变色，所以不是太懂是什么原因造成的

传统做法是针对每一个元素分别添加hover改变颜色，

但是由于border-color默认颜色是该样式中的color的值，

所以他只需要对最外面的a标签添加hover变色，

里面的图形也会采用这个样式，并且边框也跟着采用了这个样式。

就省了两个hover（内部符号的颜色和他的边框色），这是我的理解