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

Question

我了解到主要浏览器不支持文本装饰颜色，所以我的问题如下 -- 有没有办法模拟文本装饰颜色？

Answer 1

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

对于不同的 text-decoration 值：

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> 只能是单行的才能起作用。

Answer 2

这里有几种方法。

我更喜欢伪元素...它比边框更易于控制和设置动画。

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>

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

代码笔：http://codepen.io/anon/pen/Myyzwx

但是，如果受影响的元素（单词）中断，这将导致不需要的行为