用::after画叉号常失败因×字符依赖字体度量、难对齐且不可控；应改用border或linear-gradient绘制两条斜线，配合绝对定位与transform居中，并扩展点击热区、显式定义颜色变量以适配主题与高清屏。
用 ::after 画叉号为什么常失败？
直接写 ::after { content: "×"; } 看似简单，但实际会遇到对齐不准、点击区域小、颜色继承异常等问题。根本原因是：默认的 × 字符不是居中设计的，它依赖字体度量，不同字体下 baseline、x-height 差异大；而且纯字符无法精确控制粗细、长度和角度。
::after 绘制两条斜线的实操要点
真正可控的方式是把叉号拆成两条独立的 ::after 和 ::before（或只用一个伪元素 + transform），用 border 或 background 模拟线条：
- 推荐用
border：短小、无需额外 DOM，兼容性好（IE8+） - 设
position: absolute，父容器需position: relative - 两条线统一用
top: 50%; left: 50%定位中心，再用transform: translate(-50%, -50%)精确锚点 - 第一条线：
width: 12px; height: 2px; background: currentColor;+transform: rotate(45deg) - 第二条线：
width: 12px; height: 2px; background: currentColor;+transform: rotate(-45deg)
如果只用一个伪元素，可改用 linear-gradient 背景叠加：
element::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 12px;
background:
linear-gradient(45deg, currentColor 4px, transparent 0),
linear-gradient(-45deg, currentColor 4px, transparent 0);
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
点击删除区域太小？补足可点击范围
视觉上叉号只有几像素宽，但用户需要合理点击热区。别只靠伪元素本身响应事件——::before/::after 默认不触发 click，且无尺寸时 pointer-events 无效：
- 给父标签（如
<span class="tag"></span>）加padding-right: 20px，留出空间 - 伪元素自身设
width/height并覆盖该区域，例如right: 6px; top: 50%; transform: translateY(-50%) - 务必加
pointer-events: auto（伪元素默认为none） - 为防误触，建议在 JS 中监听父元素的
click，再通过event.target === this::after判断是否点中叉号（实际用event.target.matches(".tag::after")不行，得靠坐标或 class 区分）
适配深色模式和动态主题时容易忽略的点
用 currentColor 是对的，但要注意它继承自父元素的 color，而很多 Tag 组件的文本色和边框色不一致（比如文字灰色、边框浅灰）。这时叉号可能过淡或过重：
- 不要依赖父级
color，显式设color: var(--tag-close-color, #999)，并在 CSS 变量中统一管理 - 深色模式下，
currentColor可能变成白色，导致叉号在白色背景上不可见——必须配合@media (prefers-color-scheme: dark)覆盖 - 高对比度模式下，部分浏览器会强制重置
background和border，用outline或box-shadow备用绘制更稳妥
真正麻烦的是缩放和高清屏：1px 的 border 在 2x 屏上发虚，用 transform: scale(0.5) 或 background-image 的 SVG data URL 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
