input右侧图标用::after偏移不准是因为其为行内替换元素，须将position: relative设在父容器（如.input-group）而非input本身；content需非空，right用0.75rem，IE11不支持input伪元素，应降级字体并避免transform。
input右侧图标用::after为什么总偏移不准
因为input默认是行内替换元素，position: relative必须显式加在父容器上，而不是input本身。直接给input设position: relative在Bootstrap里常被框架样式覆盖，且IE11下会失效。
- 正确做法：把
input包进<div class="input-group"></div>，对这个div加position: relative - 图标用
::after时，content必须非空（哪怕只是" "），否则不渲染 -
right值建议用0.75rem（对应Bootstrap的$input-padding-y），别硬写12px——改主题时会错位
Bootstrap 5中.form-control和.input-group怎么配合伪元素
Bootstrap 5废弃了.input-group-addon，但没禁止你用伪元素；关键是避开它的display: flex干扰。直接在.input-group里塞::after会被flex布局挤出视区。
- 只对
.input-group > .form-control的父级.input-group设position: relative -
::after加在.input-group上，position: absolute+top: 50%+transform: translateY(-50%)垂直居中 - 图标字体（如Font Awesome）用
font-family: "Font Awesome 6 Free"，注意font-weight要匹配solid（900）或regular（400）
.input-group {
position: relative;
}
.input-group::after {
content: "\f002";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
图标点击触发清空功能时，pointer-events怎么设才不挡input聚焦
伪元素默认会拦截鼠标事件，点图标时input收不到焦点，用户还得再点一次框体——这是最常被忽略的交互断裂点。
-
::after必须加pointer-events: none，否则图标区域无法穿透到下方input - 如果图标需要响应点击（比如清空），不能靠伪元素，得用真实
<button></button>并设position: absolute覆盖，再手动绑定click清空value - 用真实按钮时，记得加
tabindex="-1"避免键盘焦点跳入，同时用aria-label="Clear"保无障碍
IE11兼容性下::after图标显示异常的三个硬限制
IE11对表单控件的伪元素支持极差，不是“加个polyfill就能好”，而是根本机制不支持。
立即学习“前端免费学习笔记（深入）”；
- IE11完全不支持
input[type="text"]::after，所以必须用父容器承载伪元素 - Font Awesome 6的SVG+JS方案在IE11里不工作，得降级用FA4的字体方案，
content用Unicode字符 -
transform: translateY(-50%)在IE11的input父容器里可能计算错误，稳妥做法是改用top: 0.375rem（即$input-padding-y / 2）
