01 · 伪元素：处理哪个部分？
写法：选择器::伪元素。如 p::first-letter 选取首字母；::before、::after 可在内容开头、末尾生成内容。
核心知识
伪元素：局部样式与生成内容
伪元素（pseudo-element）让 CSS 可以选取元素的特定部分，或创建用于展示的生成内容，不必在 HTML 中增加对应标签。
对照代码
<style>
.required::after {
content: " *";
color: #b42318;
}
</style>
<label for="email">
<span class="required">邮箱（必填）</span>
</label>
<input id="email" type="email" required>02 · 与伪类有什么区别？
a:hover：按悬停状态匹配，样式作用于链接本身。
.required::after：样式作用于末尾生成的内容。本例只有星号变红。
03 · 对照左侧：星号从哪里来？
content: " *" 生成空格和星号，color 设置红色，无需新增 HTML 标签。
星号只作提示；“必填”文字保留在 HTML 中，输入框的 required 属性负责校验。
补充：冒号写法与生成内容
新代码中，伪类使用单冒号，如 :hover；伪元素使用双冒号，如 ::after。为兼容早期 CSS，浏览器仍接受 :before、:after 等少数历史单冒号写法。::before 和 ::after 通常需要设置 content 才会生成内容；content: "" 可生成空内容，配合背景或边框画装饰。不要只靠生成内容传达关键说明。
展开完整代码与运行演示
<style>
.required::after {
content: " *";
color: #b42318;
}
</style>
<label for="email">
<span class="required">邮箱（必填）</span>
</label>
<input id="email" type="email" required>