abbr标签本身不带下划虚线，需通过css显式定义text-decoration等样式实现专业词汇视觉提示；它核心作用是语义化标记缩写词并依赖title属性提供无障碍支持。
abbr 标签本身不带下划虚线，需通过 CSS 显式定义样式才能实现专业词汇的视觉提示效果。
理解 abbr 的语义作用
abbr 是 HTML5 中用于标记缩写词或首字母缩略词的语义化标签，例如 <abbr title="Cascading Style Sheets">CSS</abbr>。它本身不渲染任何特殊样式，但浏览器会默认将其视为内联元素，并支持 title 属性悬浮显示全称——这是无障碍和 SEO 的关键基础。
用 CSS 添加下划虚线样式
只需为 abbr 设置 text-decoration 即可添加虚线下划线。推荐写法如下：
abbr {
text-decoration: underline dashed #666;
text-decoration-color: #666;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
}
说明：
• underline dashed 指定虚线下划线类型
• text-decoration-color 控制颜色（避免依赖默认色）
• text-decoration-thickness 和 text-underline-offset 精确控制粗细与离文字距离，提升可读性
增强可访问性与兼容性
仅靠虚线不够，还需确保所有用户都能获取含义：
- 始终设置
title属性，如<abbr title="Artificial Intelligence">AI</abbr> - 在 CSS 中为
abbr[title]单独加样式，避免无 title 的 abbr 被误标 - 对旧版 Safari 或 IE，可补充
border-bottom: 1px dashed #666作为降级方案 - 若项目需高对比度支持，建议搭配
@media (prefers-contrast: high)调整颜色
避免常见误区
不要把 abbr 当作通用强调标签使用：
• 不要用于非缩写内容（如“重要”“注意”），这会破坏语义
• 不要嵌套其他行内元素（如 <strong></strong>）在 abbr 内，可能干扰屏幕阅读器解析
• 不要依赖纯视觉样式传递关键信息——虚线只是辅助，title 才是核心
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
