通过伪元素 ::before 在图标内部叠加一个圆形遮罩层，配合精确的尺寸与定位，实现悬停时仅图标“内圈”变绿，不溢出原始轮廓。
通过伪元素 `::before` 在图标内部叠加一个圆形遮罩层，配合精确的尺寸与定位，实现悬停时仅图标“内圈”变绿，不溢出原始轮廓。
Material Symbols 图标（如 check_circle）本质是字体图标，其渲染区域包含一定空白边距，直接设置 background-color 或 border-radius 会导致背景超出视觉圆环边界。要精准控制“仅内部着色”，推荐使用 绝对定位伪元素 + 百分比缩放 的方案。
核心思路是：
- 将图标容器设为
position: relative，为伪元素提供定位上下文； - 利用
::before创建一个覆盖在图标下方的圆形层（border-radius: 100%），通过width/height（建议80%）和left/top（各10%）使其居中且严格限制在图标视觉范围内； - 设置
z-index: -1确保伪元素位于文字图层之下，避免遮挡符号； - 仅在
:hover状态下激活该样式，实现交互反馈。
✅ 推荐 CSS 实现：
.material-symbols-outlined {
position: relative;
cursor: pointer; /* 建议改为 pointer，明确可交互 */
display: inline-flex;
align-items: center;
justify-content: center;
}
.material-symbols-outlined:hover::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background-color: #4CAF50; /* 绿色，可自定义 */
border-radius: 50%;
z-index: -1;
}
⚠️ 注意事项：
-
80%是经验性比例，适用于多数字号（16px–48px）。若图标尺寸极大（如64px+）或极小（12px），可微调至75%–85%并在 Chrome/Firefox/Safari 中交叉验证； - 必须确保父容器无
overflow: hidden，否则伪元素可能被裁剪； - 避免对
.material-symbols-outlined直接设置padding或line-height，以免干扰定位基准； - 如需支持深色模式，可用
color-scheme: light dark配合prefers-color-scheme媒体查询动态调整背景色。
该方法不依赖额外 HTML 结构，纯 CSS 驱动，语义清晰、性能高效，是实现「图标内填色悬停」的最佳实践。
