[css特殊符号系列] '添加'＋符号

目标图：

知识点：

• 伪元素::after content必须有，可以为空。
• 伪元素默认display：inline，所以当content:''时，伪元素不能被撑开而造成看不见，此时可以设置display属性或者对伪类元素定位。
• 并且伪元素跟在主元素（暂且这么叫）内容的后面，而不是主元素的后面。

html代码：

<div className="App">
   <div className='cross'></div>
</div>

css代码：

.App {
  height: 51px;
  width: 51px;
  margin:200px;
  border: black 1px solid;
  border-radius: 25px;
  position: relative;
}
.cross{
  height: 1px;
  width: 44px;
  background: black;
  position: absolute;
  top:25px;
  bottom:0;
  left: 3px
}
.cross::after {
  content: '';
  height: 44px;
  width: 1px;
  display: block;
  background: black;
  position: absolute;
  top:-22px;
  left: 22px
}