css - 为文字装饰线模拟文字装饰色

Question

我了解到主要浏览器不支持 text-decoration-color，所以我的问题如下 -- 有什么方法可以模拟 text-decoration-color 吗？

Answer 1

是的，text-decoration样式确实有 horrible browser support .

对于不同的text-decoration值(value)观:

text-decoration:underline; :

只需使用 border-bottom而不是 text-decoration :

a {
  text-decoration: none;
  border-bottom: 1px solid orange;
}

<a href="http://example.com">Examples</a>

这可能没有确切的效果，但非常相似。

text-decoration:overline; :

只需使用 border-top而不是 text-decoration :

a {
  text-decoration: none;
  border-top: 1px solid orange;
}

<a href="http://example.com">Examples</a>

text-decoration:line-through; :

没那么简单，为此我们必须使用伪元素:

a {
  text-decoration: none;
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: orange;
  margin: auto;
}

<a href="http://example.com">Examples</a>

上面对齐元素垂直中间的线。请注意 <a>只能单行才能工作。