可用纯HTML+CSS实现可点击关闭的标签按钮：用<span role="button" tabindex="0">×</span>配合.tag-close类设置宽高、居中、悬停/聚焦反馈及过渡动画，外层.tag用flex布局，确保可访问性与点击区域充足。
怎么用纯HTML+CSS实现带关闭叉号的标签按钮
不需要JavaScript也能做出可点击关闭的标签按钮，关键在合理利用×符号、伪元素或内联SVG，再配合CSS控制交互状态。浏览器兼容性没问题，但要注意user-select: none和cursor: pointer必须显式设置，否则视觉像按钮但点不动。
- 直接用
×字符最简单，但字号和垂直对齐容易错位，建议包裹在<span>里单独设font-size和line-height - 用
::after伪元素画叉更灵活，能精确控制大小/颜色/间距，但需确保父容器有position: relative - 避免把整个标签设成
<button>——语义不对，屏幕阅读器会误读为操作控件；推荐用<span role="button" tabindex="0">兼顾可访问性
常见排版错误：叉号位置偏移或点击区域太小
多数人写的叉号靠右贴边后，发现鼠标悬停时只有最右边1–2像素能触发，实际是没给padding-right或margin-left留出安全点击区。正确做法是让叉号容器本身有足够尺寸，而不是只靠文字撑开。
- 给关闭区域（比如
<span class="tag-close">）设display: inline-flex+align-items: center+justify-content: center - 固定宽高，例如
width: 18px; height: 18px;，再用font-size: 14px居中显示× - 外层标签加
padding: 2px 8px 2px 6px，让文字和叉号之间有呼吸感，别挤在一起
CSS里如何让叉号响应hover和focus状态
仅靠:hover不够，键盘用户按Tab键聚焦时也得有视觉反馈，否则不符合WCAG标准。不能只写.tag-close:hover，必须补上.tag-close:focus，且两者样式一致。
- 统一用
background: #f0f0f0; color: #666;作为悬停/聚焦态，取消默认outline，改用box-shadow: 0 0 0 2px rgba(0,0,0,.1) - 添加
transition: background .15s, color .15s提升手感，但别加太长，否则拖沓 - 禁用文本选中：
user-select: none写在.tag-close上，不然双击可能意外选中叉号
一个可用的最小化HTML+CSS实例
下面这段代码复制粘贴就能跑，没依赖，适配Chrome/Firefox/Safari。注意role="button"和tabindex="0"不能少，否则键盘无法操作。
立即学习“前端免费学习笔记（深入）”；
<style>
.tag {
display: inline-flex;
align-items: center;
background: #e9ecef;
border-radius: 4px;
padding: 2px 8px 2px 6px;
margin: 4px 4px 4px 0;
font-size: 14px;
}
.tag-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 4px;
font-size: 14px;
line-height: 1;
color: #6c757d;
cursor: pointer;
user-select: none;
border-radius: 50%;
transition: background .15s, color .15s;
}
.tag-close:hover,
.tag-close:focus {
background: #dee2e6;
color: #495057;
box-shadow: 0 0 0 2px rgba(0,0,0,.1);
}
.tag-close:focus {
outline: none;
}
</style>
<span class="tag">前端<span class="tag-close" role="button" tabindex="0">×</span></span>
<span class="tag">CSS<span class="tag-close" role="button" tabindex="0">×</span></span>
叉号图标的视觉权重常被低估——它既要小到不抢主文本风头，又要大到手指能准确点中。真正难的是在紧凑排版里平衡可点击性、可访问性和视觉节奏，不是画个×就完事。 
