如何通过CSS :required伪类为必填表单项自动添加星号？-css教程-PHP中文网

:required伪类本身不生成内容或样式，仅用于匹配带required属性的控件；星号需配合::after等伪元素插入，且必须加在label上（因input等替换元素不支持伪元素），推荐label:has(> :required)::after或降级为label.required::after。

如何通过css :required伪类为必填表单项自动添加星号？

为什么 `:required` 本身不会显示星号

:required 只是一个匹配状态的伪类，它不生成内容，也不改变视觉样式——它只是帮你“选中”那些带 required 属性的表单控件。想让星号出现，必须配合 ::after 或 ::before 伪元素插入内容。

用 `::after` 在 `label` 后加星号最稳妥

直接给 input:required::after 加星号会失败：表单控件（如 input、select）是替换元素，大多数浏览器不支持在它们上面使用 ::before/::after（尤其是 input[type="text"] 等）。正确做法是把星号加到关联的 label 上：

label:has(> :required) ::after {
  content: " *";
  color: #e74c3c;
  font-weight: bold;
}

但注意：:has() 在旧版 Safari 和部分安卓 WebView 中不支持。兼容性要求高时，改用显式 class 或 JS 注入更可靠。

确保 label 正确 for 关联或包裹 input，否则 :has() 不生效
避免写成 label:required::after —— label 元素本身没有 required 属性，这个选择器永远不匹配
星号前加空格（" *"），避免紧贴文字影响可读性

不依赖 `:has()` 的降级方案

如果要支持 Safari 15.4 之前版本或 IE，推荐在 HTML 中显式标记必填项，例如：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<label>姓名<span class="required-star" aria-hidden="true"> *</span></label>
<input type="text" required>

再配 CSS：

.required-star {
  color: #e74c3c;
  font-weight: bold;
}

aria-hidden="true" 防止屏幕阅读器重复播报“星号”，语义仍由 required 属性保障
不推荐用 input + label::before —— 表单控件和 label 的 DOM 顺序常不固定，相邻兄弟选择器容易失效
若用 JS 动态添加星号，务必监听 DOMSubtreeModified 或用 MutationObserver，防止后续动态插入的 required 字段漏处理