input不支持::before/::after伪元素，因其为替换元素；须用div包裹并设position: relative，再对div使用伪元素配合absolute定位实现视觉叠加，同时需设置input padding-right预留空间并兼顾可访问性。
input 本身不支持 content 伪元素，必须用 div 包裹
直接给 <input> 添加 ::before 或 ::after 不生效，因为 input 是替换元素（replaced element），浏览器禁止对其使用伪元素。常见错误是写成：
input::after { content: "kg"; }
这完全无效。正确做法是用 <div> 容器包裹 <input>，再对容器设置相对定位，然后用伪元素绝对定位到右侧。
单位后缀需用 absolute + right 实现视觉叠加
伪元素默认脱离文档流，要让它“贴在输入框右边”，关键在于父容器的定位上下文和伪元素的尺寸控制：
- 父
<div>必须设position: relative - 伪元素设
position: absolute、right: 8px（根据内边距微调） - 为避免遮挡文字，建议设
pointer-events: none，否则点击后缀会失焦 - 字体大小、行高最好与
input保持一致，否则垂直对不齐
兼容性与可访问性要注意 input 的 padding-right
如果只靠伪元素显示单位，但 input 内容撑到最右，就会被遮盖。必须给 input 留出右侧空白：
立即学习“前端免费学习笔记（深入）”；
input { padding-right: 40px; }
这个值要 ≥ 单位文字宽度 + 伪元素 right 偏移量。另外，屏幕阅读器不会读取 content 里的文本，所以如果单位有语义（比如“摄氏度”影响数值理解），应在 aria-label 或 aria-describedby 中补充说明。
别忽略 focus 状态下的 z-index 和边框对齐
当 input 获焦时，浏览器默认边框可能变粗或偏移，导致伪元素错位。常见问题包括：
- 聚焦后单位文字突然上移——检查
input的border和outline是否改变高度 - 伪元素被聚焦边框盖住——给伪元素加
z-index: 1，并确保父容器没有overflow: hidden - 移动端点击区域太小——把伪元素的
width设为足够宽，并加cursor: default
真正难处理的是不同浏览器对 box-sizing 和 line-height 的解析差异，尤其是 Safari 对 input 行高的计算更严格，单位文字容易上下浮动一两个像素。
