Bootstrap 5按钮旁出现无样式蓝色短划线问题求助

问题根源 #

你把按钮嵌套在了<a>标签里，这既不符合HTML规范（交互式元素不能嵌套其他交互式元素），还触发了Bootstrap对<a>标签的默认样式——要么是链接的下划线，要么是焦点状态下的轮廓线，这就是你看到的蓝色短划线。

两种解决办法 #

1. 改用Bootstrap按钮式链接（推荐）

直接把<a>标签改成按钮样式，彻底避免嵌套问题：

<!-- 替换原来的a+button结构 -->
<a href="https://storm.westyorkshireroleplay.com/signup" class="btn hero-btn">Apply Now</a>
<a href="https://storm.westyorkshireroleplay.com/communityinfo" class="btn hero-btn">About Us</a>

你的自定义.hero-btn样式可以直接复用，完全不影响效果。

2. 修复现有嵌套的样式问题

如果一定要保留当前嵌套结构，给包裹按钮的<a>标签添加样式，移除默认的文本装饰和焦点轮廓：

/* 给包含按钮的a标签移除下划线和轮廓 */
.mx-auto.my-auto a {
  text-decoration: none;
  outline: none;
}

或者给这些<a>单独加类，样式更精准：

.hero-btn-wrap {
  text-decoration: none;
  outline: 0;
}

对应修改HTML：

<a href="https://storm.westyorkshireroleplay.com/signup" class="hero-btn-wrap">
  <button class="btn hero-btn">Apply Now</button>
</a>

重要提醒 #

HTML规范明确禁止交互式元素（比如<button>）嵌套在另一个交互式元素（比如<a>）里，这种写法可能导致点击冲突、浏览器渲染异常等问题，优先选第一种方法更稳妥。

内容的提问来源于stack exchange，提问作者Welshy