最常见的原因是未设置 content 属性或其值为空；必须显式声明 content（如 "" 或 Unicode 字符），并确保字体加载、display 和定位正确。
为什么 ::before 和 ::after 加图标经常不显示
最常见原因是没设置 content 属性，或者值为空字符串。这两个伪元素默认不渲染，必须显式写 content: "" 或带内容（比如图标字符、URL）。另外，display 默认是 inline，如果父元素是 flex 或 grid，可能需要调整伪元素的 align-self 或 margin 才能对齐。
用字体图标（如 Font Awesome）加前后图标
推荐用 font-family + Unicode 字符方式，兼容性好、无需额外请求。需确保字体已加载且伪元素继承了正确字体。
- 先在 CSS 中引入字体（如 Font Awesome 的 Web Font），或使用系统已有图标字体（如
"Segoe UI Symbol"） -
::before和::after必须设content为对应 Unicode，例如"\f00c" - 建议加
font-weight: normal和font-style: normal避免样式干扰 - 图标大小靠
font-size控制，颜色用color
button {
position: relative;
padding-left: 28px;
padding-right: 28px;
}
button::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-size: 14px;
}
button::after {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #dc3545;
font-size: 14px;
}
用 SVG 或 base64 图片做图标
适合需要高保真或动态配色的场景，但要注意 URL 编码和跨域限制。Base64 最稳妥，但体积大；外部 SVG 文件更灵活，但需确保路径可访问。
-
content值用url()，支持 data URL 或相对路径 - 图片默认按原尺寸显示，可用
width/height调整，但需配合display: inline-block - 若用
background-image替代content，就不是伪元素图标了，而是背景图，行为不同
a::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007bff' d='M10 6H2M6 2v8M2 2l4 4-4 4'/%3E%3C/svg%3E");
display: inline-block;
margin-right: 6px;
width: 12px;
height: 12px;
}
IE 兼容与现代写法注意点
IE8 只支持单冒号 :before 和 :after，而现代标准要求双冒号 ::before。实际项目中建议用双冒号，并确保构建工具（如 Autoprefixer）不误删 IE 兼容规则。另外，content 不能用于替换元素（如 <img alt="css 如何给元素前后加图标_使用 before after 伪元素" >、<input>），也不能给 <button></button> 的子元素用伪元素——必须作用于按钮自身。
立即学习“前端免费学习笔记（深入）”；
- 不要给
display: none或visibility: hidden的元素加伪元素，它们不会渲染 - 伪元素无法响应事件，如需点击交互，得用真实元素包裹图标
- 用
pointer-events: none可让伪元素不拦截鼠标事件
padding 和 line-height 计算，位置偏移全靠 position + top/left/right/bottom 或 transform 手动调，没有“自动贴边”逻辑。 
