用 由版主精选 实现角标，父容器设 position: relative，角标用 position: absolute 定位右上角，配 #ff6b35 背景、12px 字体、2px 圆角；须用真实元素保障可访问性，IE9–10 避免 transform 和 Flex 布局，加 role="note" 且动态同步 aria-hidden。
HTML里怎么加“由版主精选”角标
直接用 <span></span> 套一层带样式的标签，配合定位实现角标效果。CSS 控制位置、颜色、大小，不依赖图片或额外 DOM 结构。
- 角标本质是「叠加在原内容右上角的轻量提示」，
position: absolute是最稳妥方案，避免影响原有布局流 - 父容器必须设
position: relative，否则absolute会往上找最近定位祖先，容易错位 - 文字内容用
由版主精选即可，别写成「精华帖」「Featured」等英文，中文场景下用户认知更直接 - 字体建议用
font-size: 12px，背景色用#ff6b35（暖橙）比纯红更柔和，边框圆角border-radius: 2px防锯齿
为什么不能用 title 属性或伪元素硬塞
有人试过用 title 属性弹提示，或靠 ::after 伪元素生成文字——这两种方式都绕开了语义和可访问性底线。
-
title只在悬停时触发，手机端完全不可见，且屏幕阅读器支持率低，等于对残障用户关闭提示 -
::after生成的内容无法被复制、无法被翻译插件识别，SEO 和多语言场景下会丢信息 - 真正需要的是「可见、可读、可交互」的角标，不是视觉彩蛋——所以必须用真实 HTML 元素，比如
<span class="badge-hot">由版主精选</span>
兼容旧版 IE 的写法要注意什么
如果项目还要求支持 IE9–10，position: absolute 没问题，但得避开 Flex/Grid 布局来包裹角标，否则定位基准会漂移。
- IE9 不支持
transform: translate(-50%, -50%)，所以右上角定位别用top: 0; right: 0; transform: translate(100%, -100%)这类写法 - 老版本 IE 对
inline-block容器内vertical-align行为不稳定，建议角标父元素统一用display: block或inline-flex - 字体渲染上，IE 默认用
filter: progid:DXImageTransform.Microsoft.gradient会导致文字发虚，直接禁用滤镜，用纯色背景保清晰度
角标要不要加 aria-label 或 role
要，但只加 role="note" 就够了，不需要画蛇添足写 aria-label="由版主精选"。
立即学习“前端免费学习笔记（深入）”；
- 角标文字本身已具备完整语义，重复加
aria-label会让屏幕阅读器读两遍，干扰用户 -
role="note"能让辅助技术知道这是补充说明类信息，不打断主内容流，比role="alert"更合适 - 如果角标会动态显示/隐藏（比如 AJAX 加载后插入），记得同步操作
aria-hidden="true/false"，否则隐藏后仍可能被读出
