为了使用Font Awesome图标，所以我引入了一下两个css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
本以为轻轻松松拿捏😄 ，因为感觉没什么问题，但~是😕 打开网页之后发现网页标签的所有 <a> 标签都多出来了下划线。然后我就纳了闷了各种查下面是我的整个操作流程
排查：
- 自定义样式冲突：你的网页中可能有其他自定义的 CSS 样式，这些样式覆盖了 Bootstrap 或其他框架的默认样式，导致了下划线的出现。
- Bootstrap 样式重置：Bootstrap 5是否有新的样式变动
- 其他 CSS 框架或库：除了 Font Awesome 和 Bootstrap，你的项目中可能还引入了其他 CSS 框架或库，这些库可能有自己的默认样式。
- 浏览器默认样式：浏览器本身也会给
<a>标签添加默认的样式，包括下划线。虽然 Bootstrap 和其他框架通常会尝试重置这些默认样式，但有时候可能会遗漏。
问题确定：
Bootstrap对a标签进行了 focus焦点事件,具体可以👀️ https://www.bootcss.com/
解决办法：
方法一：添加以下 CSS 规则来移除 <a> 标签的下划线：
a { text-decoration: none; }
a:hover { text-decoration: underline; /* 如果你希望在鼠标悬停时显示下划线 */ }
方法二：
将引用版本降低
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.4.1/css/bootstrap.min.css">
至此已经解决了这个问题了🎉️ 当然能有时候看这个问题很简单，但是也希望能帮到有用的朋友🚀️