[分享]css写一个加号

CSS写一个加号可以通过使用伪元素before和after，设置宽度、高度、旋转角度、边框等。下面展示一个简单的实现：

.add {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  line-height: 30px;
}

.add:before {
  content: ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
}

.add:after {
  content: ';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: black;
} 

上述代码中，首先给加号的容器设置一个相对定位（position: relative），宽度、高度、边框等样式。利用伪元素before和after，分别设置加号的两条线段（before为横线，after为竖线），并设置好它们的样式和位置。

此时页面中添加如下HTML代码：

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

即可在页面中显示一个简单的加号。