如何更改链接的直通/删除线颜色？

Question

我有一个带有删除线的链接。我想让删除线变浅，以便链接文本更易于阅读，但无法弄清楚如何操作。

这就是我想要它的样子（使用内部跨度而不是链接，因为它以我想要的方式出现）：

＆＃13;

＆＃13;

span.outer {
  color: red;
  text-decoration: line-through;
}
span.inner {
  color: green;
}

＆＃13;

<span class="outer">
  <span class="inner">foo bar</span>
</span>

＆＃13;

＆＃13;

＆＃13;

但这似乎不起作用：

＆＃13;

＆＃13;

span.outer {
  color: red;
  text-decoration: line-through;
}
a.inner {
  color: green;
}

＆＃13;

<span class="outer">
  <a href="#" class="inner">foo bar</a>
</span>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

有趣的是，你的第一个例子是有效的，我不会预料到......好好知道，我猜！

您可以使用伪元素实现此外观。确保元素为position:relative，然后定位伪元素absolute，全宽，无论你想要的线是多高，还是top:[50% - half the height, rounded]。它看起来像这样：

＆＃13;

＆＃13;

.fancy-strikethrough {
  color: green;
  position: relative; /* lets us position the `::after` relative to this element */
}
.fancy-strikethrough::after {
  content: ''; /* pseudo-elements must always have a `content` */
  position: absolute; /* lets us position it with respect to the `.fancy-strikethrough */

  /* placement */
  left: 0;
  top: 50%;

  /* make it a line */
  height: 1px;
  width: 100%;
  background: red;
}

＆＃13;

<a class="fancy-strikethrough">test</a>

＆＃13;

＆＃13;

＆＃13;

您甚至可以通过为元素提供一些水平填充来使边线略微延伸。

Answer 2

有一个css3属性：text-decoration-color

因此，您可以使用一种颜色和文本装饰线条（或下划线等） - 使用不同的颜色...甚至不需要额外的“换行”元素

.inner { 
    color: green;
    text-decoration: line-through;
    -webkit-text-decoration-color: red;
    text-decoration-color: red;
    font-size: 24px;
}

<a href="#" class="inner">green text with red strike-through in one element</a>

Codepen demo

NB： Browser Support有限......（caniuse）

...目前是Firefox和Safari（以及Chrome - 但你需要在chrome：// flags中启用“实验性Web平台功能”标志）

Answer 3

在这里你可以使用你想要的任何2种颜色

＆＃13;

＆＃13;

a {
  text-decoration: none;
}
.outer {
  color:gray;
  text-decoration:line-through;

}
.inner {
  color: black;
  text-decoration:underline;
}

＆＃13;

<a href="#" >
  <span class="outer">
    <span class="inner">foo bar</span>
  </span>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用边框代替并根据需要设置不透明度：

＆＃13;

＆＃13;

#line-t {
  color: green;
  font-size: 20px;
  position: relative;
  display: inline-block;
}
#line-t span {
  position: absolute;
  width: 100%;
  border-top: 2px solid red;
  left: 0;
  top: 50%;
  opacity: 0.3;
}

＆＃13;

<div id="line-t">
  foo bar
  <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;

这是codepen上的示例：http://codepen.io/startages/pen/wzapwV

Answer 5

你走了：

＆＃13;

＆＃13;

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<a href="#" style="color:#999;text-decoration:none;">facebook</a>&nbsp;&nbsp;</del>

＆＃13;

＆＃13;

＆＃13;