如何更改链接的线条/删除线颜色？答案

【问题标题】：How to change a link's line-through / strikethrough color?如何更改链接的线条/删除线颜色？
【发布时间】：2017-01-15 19:43:05
【问题描述】：

我有一个带有删除线的链接。我想让删除线更轻，以便链接文本更易于阅读，但不知道该怎么做。

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

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

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

但这似乎不起作用：

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

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

有什么想法吗？

【问题讨论】：

我会使用一个移位的边框来使其穿透您的文本。我认为您无法更改删除线颜色。
据我所知你不能。你可以做一些黑客攻击......例如K48建议的那个。或者使用伪元素！
我同意@Gacci。伪元素似乎是一个不错的方法。它们易于创建和管理。

标签： css strikethrough line-through

【解决方案1】：

有趣的是，您的第一个示例有效，我没想到……很高兴知道，我猜！

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

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

&lt;a class="fancy-strikethrough"&gt;test&lt;/a&gt;

您甚至可以通过给元素一些水平填充来让线条在两侧稍微延伸。

【讨论】：

或者，如果由于某种原因你真的想添加额外的元素（我建议不要这样做，但总是有那些边缘情况）你可以把放在之外: html <a class="struck"><span>foo bar</span></a> css .struck {text-decoration: line-through; color: red} .struck span {color: green;}

【解决方案2】：

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

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

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

&lt;a href="#" class="inner"&gt;green text with red strike-through in one element&lt;/a&gt;

Codepen demo

注意： Browser Support 有限... (caniuse)

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

为什么要给.inner 下划线？
因为如果保留下划线，它将始终是标准蓝色

【解决方案4】：

您可以改用边框并将不透明度设置为您需要的：

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

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

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

【讨论】：

【解决方案5】：

给你：

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

【讨论】：