父元素overflow:hidden致子元素聚焦样式截断的CSS解决方案

现有代码 #

CSS #

.util-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

a:focus {
  box-shadow: 0 0 0 3px blue;
  text-decoration: underline;
}

a:focus-visible {
  outline: 0;
}

HTML #

<div class="util-truncate">
  <a href="#">This is a long link that will be truncated. This is a long link that will be truncated. This is a long link that will be truncated.</a>
</div>

问题描述 #

我想给锚点（<a>）元素添加聚焦时的环形box-shadow样式，但父元素的overflow:hidden会把这个聚焦样式截断。由于util-truncate是工具类，我不能修改它的样式。请问只用CSS能不能让锚点的聚焦样式完整显示？

我已经在锚点的聚焦状态试过这些方案：

• box-shadow
• 带偏移的outline
• 结合z-index的box-shadow
• 内联（inset）box-shadow（效果接近但不符合需求）
• 使用before/after伪选择器

当前效果 #

解决方案 #

方法1：使用filter: drop-shadow() #

drop-shadow是基于元素轮廓生成的阴影，不会被父元素的overflow:hidden截断，完全符合需求。修改锚点的聚焦样式即可：

a:focus {
  /* 替换原box-shadow */
  filter: drop-shadow(0 0 0 3px blue);
  text-decoration: underline;
}

方法2：padding+margin预留阴影空间 #

给锚点设置position: relative，通过正负边距给阴影留出显示空间，同时不破坏父元素的截断效果：

a {
  text-decoration: none;
  position: relative;
  padding: 0 8px; /* 为阴影预留横向空间 */
  margin: 0 -8px; /* 抵消padding，不影响原有布局 */
}

a:focus {
  box-shadow: 0 0 0 3px blue;
  text-decoration: underline;
}

两种方法都无需修改util-truncate工具类的样式，纯CSS即可解决问题。

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