含div的链接自定义焦点轮廓异常问题求助

接下来聊聊为什么自定义焦点会出问题：

给你两个完美解决办法，选哪个看你布局需求：

.custom-focus:focus {
  outline: #fa0 solid 2px;
}
/* 新增这行，让a标签的盒模型能包裹子元素 */
.custom-focus {
  display: inline-block; /* 要是需要占满整行就用display: block */
}

.custom-focus:focus {
  outline: none; /* 先去掉默认outline避免冲突 */
  /* 用阴影模拟高可见性焦点，这个样式和你要的橙色2px效果一致 */
  box-shadow: 0 0 0 2px #fa0;
}

最后提个小建议：你重视焦点可见性真的很棒，这对键盘导航的用户太重要了！记得确保焦点样式的对比度足够（比如你的橙色和白色背景就很ok），千万别只写outline: none却不加替代样式哦~

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