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

Question

我有一个带删除线的链接。我想让删除线变浅，这样链接文本更容易阅读，但是我不知道如何做。

这是我想要的效果（使用内部 span 而不是链接，因为这样会得到我想要的效果）：

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>

有什么想法吗？

- kareem

---

我会使用一个位移的边框来划掉你的文字。我认为你不能改变划掉线的颜色。 - user6269864

据我所知，你不能这样做。你可以使用一些技巧...例如K48建议的那个。或者使用伪元素！ - Gacci

我同意 @Gacci 的观点。伪元素似乎是一个不错的选择。它们易于创建和管理。 - Tino Caer

Answer 1

很有趣，你的第一个例子有效，我之前并没有想到……这很好，我想！

你可以通过伪元素来实现这种外观。确保元素是position:relative，然后将伪元素定位为absolute，宽度铺满整个父元素，高度随意，并且top:[50% - 高度一半（四舍五入）]。具体效果如下：

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

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

通过给元素添加一些水平padding，甚至可以让线在两侧延伸一点。

- henry

---

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

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

NB：浏览器支持有限...（caniuse）

目前只有Firefox和Safari支持（Chrome需要在chrome://flags中启用“实验性Web平台功能”标志）。

- Danield

Answer 3

这是你想要的，你也可以应用任意两种颜色

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>

- Rudi Urbanek

---

为什么给.inner加下划线？ - henry

因为如果 <a> 保持下划线，它将始终是标准蓝色。 - Rudi Urbanek

Answer 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

- Ali_k

Answer 5

请看这里：

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

- Eugene Kardash