input右侧图标用::after偏移不准是因为其为行内替换元素，须将position: relative设在父容器（如.input-group）而非input本身；content需非空，right用0.75rem，IE11不支持input伪元素，应降级字体并避免transform。
input右侧图标用
为什么总偏移不准
因为
默认是行内替换元素，
必须显式加在父容器上，而不是
本身。直接给
设
在Bootstrap里常被框架样式覆盖，且IE11下会失效。
正确做法：把
包进
，对这个
加
图标用
时，
必须非空（哪怕只是
），否则不渲染
值建议用
（对应Bootstrap的
），别硬写
——改主题时会错位
Bootstrap 5中
和
怎么配合
伪元素
Bootstrap 5废弃了
，但没禁止你用伪元素；关键是避开它的
干扰。直接在
里塞
会被flex布局挤出视区。
只对
的父级
设
加在
上，
+
+
垂直居中
图标字体（如Font Awesome）用
，注意
要匹配
（900）或
（400）
图标点击触发清空功能时，
怎么设才不挡input聚焦
伪元素默认会拦截鼠标事件，点图标时
收不到焦点，用户还得再点一次框体——这是最常被忽略的交互断裂点。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须加
，否则图标区域无法穿透到下方
如果图标需要响应点击（比如清空），不能靠伪元素，得用真实
并设
覆盖，再手动绑定
清空
用真实按钮时，记得加
避免键盘焦点跳入，同时用
保无障碍
IE11兼容性下
图标显示异常的三个硬限制
IE11对表单控件的伪元素支持极差，不是“加个polyfill就能好”，而是根本机制不支持。
立即学习
“
前端免费学习笔记（深入）
”；
IE11完全不支持
，所以必须用父容器承载伪元素
Font Awesome 6的SVG+JS方案在IE11里不工作，得降级用FA4的字体方案，
用Unicode字符
在IE11的
父容器里可能计算错误，稳妥做法是改用
（即
）
伪元素插图标这事，看着是CSS技巧，实际卡点全在父容器定位逻辑和浏览器对表单元素的特殊处理上。尤其当项目还要兼容IE11时，别试图“强行统一写法”，该用真实按钮就用，该降级字体就降级——伪元素只是手段，不是执念。
::afterinputposition: relativeinputinputposition: relativeinputdivposition: relative::aftercontent" "right0.75rem$input-padding-y12px.form-control.input-group.input-group-addondisplay: flex.input-group::after.input-group > .form-control.input-groupposition: relative::after.input-groupposition: absolutetop: 50%transform: translateY(-50%)font-family: "Font Awesome 6 Free"font-weightsolidregular.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-eventsinput::afterpointer-events: noneinputposition: absoluteclickvaluetabindex="-1"aria-label="Clear"::afterinput[type="text"]::aftercontenttransform: translateY(-50%)inputtop: 0.375rem$input-padding-y / 2