一.给必填项加上*标识
.form-item label.required::after { content: '*'; color: #f56c6c; margin-left: 2px; }🔍 拆解分析
| 部分 | 含义 |
|---|---|
.form-item | 选择 class 为form-item的父容器（如<div class="form-item">） |
label | 在该容器内找<label>标签 |
.required | 要求这个<label>必须有class="required" |
::after | CSS 伪元素，在匹配到的<label>内容末尾之后插入内容 |
.form-item label.required::after是一个CSS选择器，它在表单设计中特别常见，用来给必填项加个"小星星"提示。
简单来说，它是在做这么一件事：
- 找到所有class为"form-item"的表单区域
- 在这个区域里找到class为"required"的label标签
- 在这个label标签的"后面"（::after伪元素）插入一个星号