css伪元素实现选中效果【打勾效果】

CSS伪元素可以用来创建打勾效果，以下是一个简单的例子：

HTML:

<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Check me out
</label>

CSS:

/* 复选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
 
/* 打勾标记样式 */
.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}
 
/* 当复选框被选中时，显示打勾 */
.checkbox input:checked + .checkmark:before {
  position: absolute;
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
 
/* 隐藏原生的复选框样式 */
.checkbox input:checked + .checkmark {
  background-color: #bada55;
}
 
.checkbox span.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

这段代码中，.checkbox input 隐藏了原生的复选框，.checkbox .checkmark 创建了一个空白的打勾区域，.checkbox input:checked + .checkmark:before 在复选框被选中时，通过伪元素 :before 创建了打勾效果。通过CSS的 transform: rotate(45deg); 属性，将打勾样式旋转成标准的对勾形状。