通过伪元素 ::before 在图标内层叠加一个圆形背景，配合精确的尺寸与定位，可实现悬停时仅填充图标“内部”（即圆形轮廓范围内）为绿色，避免溢出或变形。
通过伪元素 `::before` 在图标内层叠加一个圆形背景，配合精确的尺寸与定位，可实现悬停时仅填充图标“内部”（即圆形轮廓范围内）为绿色，避免溢出或变形。
Material Symbols 图标（如 check_circle）本质是字体图标，其视觉形状由字形轮廓决定，而非 SVG 路径或矢量图形，因此无法直接用 CSS 填充其“内部”。但可通过巧妙利用伪元素与绝对定位，在图标的视觉边界内模拟一个同心圆背景，从而达成「仅内部变色」的效果。
核心思路是：
- 将图标容器设为
position: relative； - 利用
::before伪元素创建一个绝对定位的圆形背景层； - 通过
width: 80%; height: 80%; left: 10%; top: 10%实现居中且严格限制在图标字形可视区域内（实测 80% 是兼顾多数字号与浏览器渲染的稳健值）； - 设置
border-radius: 100%确保为正圆，并用z-index: -1置于图标文字下方。
以下是完整、可直接运行的示例代码：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
<style>
.material-symbols-outlined {
position: relative;
cursor: pointer;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
transition: transform 0.2s ease;
}
.material-symbols-outlined:hover {
transform: scale(1.05);
}
.material-symbols-outlined:hover::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background-color: #4CAF50; /* 绿色填充 */
border-radius: 100%;
z-index: -1;
}
</style>
<!-- 使用示例 -->
<span class="material-symbols-outlined">check_circle</span>
<span class="material-symbols-outlined" style="font-size: 36px;">check_circle</span>
<span class="material-symbols-outlined" style="font-size: 48px;">check_circle</span>✅ 注意事项：
-
80%尺寸非绝对，建议在目标最小/最大字号下实测微调（如小图标可试75%，大图标可试85%）； - 必须设置
font-variation-settings（尤其是'FILL' 0）确保图标为线性轮廓，否则填充可能干扰原有样式； - 避免对
.material-symbols-outlined直接设置background或padding，会破坏定位基准； - 所有现代浏览器均支持该方案，但 Safari 对
font-variation-settings兼容性更敏感，建议保留 fallback。
此方法轻量、无需 JavaScript、语义清晰，是实现「图标内圈高亮」的专业级 CSS 解决方案。
