CSS实现选中打钩（√）样式

第一种，使用伪标签 
 

<span className={'check-style-1'}></span>

.check-style-1 {
  display: inline-block;
  position: relative;
  height: 40px;
  width: 40px;
  border: 2px solid #aaa;
  border-radius: 50%;
}
.check-style-1::after {
  content: ' ';
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 12px;
  border-width: 0 0 2px 2px;
  overflow: hidden;
  border-color: #ff0000;
  border-style: solid;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 9px;
  top: 9px;
}

 

第二种，使用边框的样式，进行旋转 

 

<span className={'check-style-2'}></span>

.check-style-2 {
  display: inline-block;
  width: 20px;
  height: 12px;
  border-left: 2px solid #ff0000;
  border-bottom: 2px solid #ff0000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}