css - 模拟文本装饰线的文本装饰颜色

我已经读过主流浏览器不支持text-decoration-color，所以我的问题是以下内容-您有没有办法模拟text-decoration-color？

最佳答案

这有两种方法。

我更喜欢伪元素...比边框更可控制和更可动画化。

a {
  color: red;
  position: relative;
  text-decoration: none;
}
.border {
  border-bottom: 2px solid green;
}
.pseudo {
  position: relative;
}
.pseudo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: blue;
}
.anim::after {
  transform: scaleX(0);
  transition: transform .5s ease;
}
.anim:hover::after {
  transform: scaleX(1);
}
.strike::after {
  top: 50%;
}

<a class="border" href="#">I'm decorated</a>

<a class="pseudo" href="#">I'm also decorated</a>

<a class="pseudo anim" href="#">I'm also animated on hover</a>


<a class="pseudo strike" href="#">I'm lined through</a>

关于css - 模拟文本装饰线的文本装饰颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35902060/