如何使用CSS修改或移除按钮聚焦时显示的方形虚线轮廓

提供两种实现方案，均无需修改原有CSS代码，只需新增CSS规则即可：

方案1：直接移除该按钮的聚焦虚线 #

原有全局button:focus规则会给所有按钮加虚线轮廓，给箭头按钮新增更高优先级的聚焦规则覆盖默认样式即可：

.cls-nav__btn:focus {
  outline: none !important;
}

类选择器优先级高于标签选择器，新增后会直接覆盖原有全局按钮的聚焦outline规则，不会影响其他按钮的聚焦样式。

方案2：实现贴合箭头边缘的虚线轮廓 #

默认的outline只能跟随元素盒模型边界，无法贴合旋转后的箭头形状，我们可以通过伪元素自定义聚焦态样式实现贴合效果：

/* 先去掉默认的方形虚线 */
.cls-nav__btn:focus {
  outline: none !important;
}
/* 新增贴合菱形的虚线框 */
.cls-nav__btn:focus::after {
  content: "";
  position: absolute;
  /* 偏移量对应原有outline-offset的2px，调整到刚好贴合箭头外围，兼容旧浏览器可替换为top/right/bottom/left分别设为-6px */
  inset: -6px;
  border: 2px dotted currentColor;
  /* 避免伪元素拦截点击事件 */
  pointer-events: none;
}

因为按钮本身已经旋转了135度变为箭头形状，伪元素会继承父元素的旋转角度，边框自然会贴合菱形箭头的边缘，和预期效果一致。

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