纯css生成加号”+”、 减号”-”

这里讲述纯css生成加号”+”、 减号”-”，用到伪类的信息。

生成加号”+”

.c1{

  border: 1px solid #6699cc;

  width: 9px;

  height: 9px;

  margin-right:3px;

  color: #ccc;

  transition: color .25s;

  position: relative;

  border-radius:2px;

  display:inline-block;

}

.c1:before{  //伪类

  content: '';

  position: absolute;

  left: 1px;

  top: 4px;

  width: 7px;

  height:1px;

  background-color:#333;

}

.c1:after{

 content: '';

 position: absolute;

 left: 4px;

 top: 1px;

 height: 7px;

 width:1px;

 background-color:#333;

}|#|#|

生成减号”-”

.c1after{  //伪类

  border: 1px solid #6699cc;

  width: 9px;

  height: 9px;

  margin-right:3px;

  color: #ccc;

  transition: color .25s;

  position: relative;

  border-radius:2px;

  display:inline-block;

}

.c1after:after{

  content: '';

  position: absolute;

  left: 1px;

  top: 4px;

  width: 7px;

  height:1px;

  background-color:#333;

}

生成的加号、减号：

欢迎阅读、分享，转载和使用请注明出处，文章来自三里河之光-风、物、情