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

Question

我已经读过主浏览器不支持text-decoration-color，所以我的问题如下 - 有没有办法模拟文本装饰颜色？

Answer 1

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

对于不同的text-decoration值：

text-decoration:underline;

只需使用border-bottom代替text-decoration：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

text-decoration:overline;

只需使用border-top代替text-decoration：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

text-decoration:line-through;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 以上对齐元素垂直中间的线条。请注意，<a>只能单行显示才能生效。

Answer 2

以下是两种方式。

我更喜欢伪元素......它比边界更可控，更具动画效果。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，你可以，根据你的用例（如果你只有一行中的文字）你可以使用伪元素和位置并为其着色。

html：

<p>Lorem Ipsum <a href="#">Dolor</a> Sit amet</p>

的CSS：

a {
  position: relative;
  text-decoration: none;
}
a:after {
  content: "";
  position: absolute;
  background-color: red;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
}

codepen：http://codepen.io/anon/pen/Myyzwx

但是，如果受影响的元素（word-）中断，则会导致不必要的行为