用::after伪元素+绝对定位实现NEW标签，无需额外HTML，避免语义污染和交互干扰；需设content、position:relative父容器及absolute伪元素，并注意z-index和自适应定位。
直接用 ::after 伪元素 + 绝对定位就能实现，不需要额外 HTML 标签，也不依赖 target-new 这类已废弃且无浏览器支持的 CSS 属性。
为什么不用 position: relative + 子元素？
很多人第一反应是给每个列表项加个 <span class="new-tag">NEW</span>，但这样会污染语义结构、增加 DOM 节点数，还容易被屏幕阅读器误读。更关键的是：如果列表项本身是 <a> 或带交互的容器，子元素可能干扰点击热区或焦点管理。
用伪元素则完全规避这些问题——它不参与 DOM 树、不触发可访问性暴露、不影响事件冒泡路径。
::after 必须配 content 和 position
常见错误是只写样式却漏掉 content，导致伪元素根本不渲染。另外，::after 默认是行内级，无法直接用 top/right 定位，必须配合 position: absolute 和一个已定位的父容器。
立即学习“前端免费学习笔记（深入）”；
- 列表项（如
<li>）需设position: relative，作为伪元素的“包含块” -
::after内必须有content: "NEW"（哪怕为空字符串也要写content: ""） -
::after需设position: absolute，再用top、right微调位置 - 建议加
z-index: 1确保标签不被其他内容遮挡
li {
position: relative;
}
li::after {
content: "NEW";
position: absolute;
top: -6px;
right: -6px;
background: #ff4757;
color: white;
font-size: 0.65em;
padding: 1px 5px;
border-radius: 2px;
z-index: 1;
}
适配不同列表结构的细节差异
如果列表项是 <a> 标签（比如导航菜单），直接在 <a> 上设 position: relative 即可；但如果 <li> 里嵌套了多层容器（如 <div class="item-content">），就要把 position: relative 下移到最外层可点击/可聚焦的元素上，否则伪元素定位会偏移。
另外注意字体缩放和高对比度模式：硬编码 top: -6px 在用户放大文字时可能错位，更健壮的做法是用 top: 0 + transform: translateY(-100%)，这样能随字体大小自适应。
兼容性和性能提醒
::after 在所有现代浏览器中都支持（IE8+），无需前缀。但要注意：如果列表项高度动态变化（比如展开/收起内容），绝对定位的标签不会自动重排，得靠 JS 监听尺寸变更并手动更新 —— 大多数场景下这没必要，右上角标签本就是装饰性视觉提示，轻微错位可接受。
真正容易被忽略的是 z-index 层级：当列表项本身有 overflow: hidden 或父容器设置了 transform，会创建新的层叠上下文，导致 z-index: 1 失效。这时要么去掉父级的 transform，要么把伪元素的 z-index 提到更高（比如 z-index: 999），或者改用 box-shadow 模拟浮层效果。
