如何同时使用自定义链接悬停动画与Bootstrap的stretched-link？

问题描述 #

给链接添加了自定义悬停下划线动画，通过::after伪类的bottom: 0;属性让下划线固定在文字下方。但给链接加上Bootstrap的stretched-link类后，下划线跑到了文字上方——因为.stretched-link::after默认设置了top: 0;，和自定义样式的定位属性产生冲突，覆盖了下划线的位置设置。

核心原因 #

Bootstrap的stretched-link依赖::after伪类实现“整容器可点击”：它给伪类设置了top: 0; left: 0; width: 100%; height: 100%;，让伪类占满父级相对定位元素的空间。而自定义下划线也用了同一个::after伪类，导致定位属性被覆盖，下划线位置错乱。

最优解决方案 #

把自定义下划线的载体从::after换成::before伪类，避开和stretched-link的伪类冲突，两个伪类各自承担功能：

• ::before负责显示自定义悬停下划线
• ::after留给stretched-link实现整容器点击

修改后的CSS代码 #

body {
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  max-width: 800px;
}

.container p {
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: #005fec;
  outline: 0;
  position: relative;
  display: inline-block;
}

/* 将原来的::after改为::before */
a::before {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #005fec;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a:focus:not(:focus-visible) {
  outline: 0;
}

a:focus-visible {
  outline: 1px solid #005fec;
  outline-offset: 2px;
}

完整示例代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-4 d-flex align-items-stretch">
      <div class="card my-2">
        <img src="https://placehold.co/400x50" class="card-img-top" alt="卡片顶部图片">
        
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
          <a href="#" class="stretched-link">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

其他可选方案（不推荐） #

如果不想更换伪类，可以用更具体的CSS选择器覆盖stretched-link的伪类样式，但这种方法会破坏stretched-link的原有功能，不建议使用：

/* 不推荐：会让stretched-link失去整容器点击的功能 */
a.stretched-link::after {
  top: auto;
  bottom: 0;
  height: 1px;
}

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