如何使用CSS ::before伪元素在不修改HTML的情况下添加装饰图标？-css教程-PHP中文网

图标不显示的根本原因是content属性缺失、为none或语法错误，导致伪元素被浏览器忽略；必须设置合法content值（如""、"✓"、"\2713"、url()或attr()），并配对font-family与font-weight，才能正常渲染。

如何使用css ::before伪元素在不修改html的情况下添加装饰图标？

content 属性必须写，否则图标根本不会出现——这是 90% 的人第一次用就栽的坑。

浏览器对 ::before 的处理非常严格：只要 content 缺失、值为 none 或语法错误（比如写成 u2713 而不是 \2713），整个伪元素会被忽略，哪怕 color、font-size 全都设对也没用。

content 可以是：""（空字符串，适合纯背景或边框）、"✓"（字面符号）、"\2713"（Unicode 转义，注意是反斜杠 \ 不是 u）、url(./icon.svg)（路径相对于 CSS 文件）、attr(data-icon)（读取 HTML 中的属性）
字体图标（如 Font Awesome）必须配对 font-family 和 font-weight："Font Awesome 6 Free" + 900 才能显示 solid 图标；写成 "FontAwesome" 或漏掉 font-weight 就会显示成方块
检查开发者工具里该伪元素是否被渲染：如果 Elements 面板中完全看不到 ::before 节点，基本就是 content 问题

::before 默认是 inline，基线对齐受字体影响大，容易上浮或下沉。光调 font-size 或 top 像素偏移，缩放或换字体后立刻失效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须加 display: inline-block：否则 width/height 无效，margin 在某些浏览器里行为异常
垂直居中优先用 vertical-align: middle，比 top: 2px 更稳定——它基于行高对齐，不受字号变化干扰
如果要绝对定位（比如图标贴左/右），宿主元素（如 li 或 a）得先设 position: relative，否则 ::before 会相对于 body 定位，图标直接飞走

原生 ul/ol 的圆点或数字会和你插入的图标重叠或错位，必须显式清除。

全局清： ul, ol { list-style: none; }
局部清（推荐）：给目标列表加类，比如 .icon-list { list-style: none; }，再对 .icon-list li::before 操作
布局建议两种：
- 绝对定位方案：父 li 设 position: relative + padding-left: 24px，::before 用 position: absolute; left: 0; top: 50%; transform: translateY(-50%)
- Flex 方案更轻量：li { display: flex; align-items: center; }，::before { margin-right: 8px; }

用 px 固定大小时，用户放大字体或切换系统缩放比例，图标就会和文字脱节。这不是 bug，是设计选择问题。

用 em 或 rem 替代 px：font-size: 1.2em 让图标随父元素字号等比缩放
颜色用 currentColor：不用硬写 #4CAF50，直接继承文字色，主题切换时自动适配
SVG 图标用 url() 插入时，确保 SVG 内联或路径正确；base64 编码的 SVG 要 URL encode 特殊字符（如 %3Csvg），否则解析失败