css - 如何更改链接的线条/删除线颜色？

Question

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

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

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>

有任何想法吗？

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

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

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

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

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

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

Answer 3

干得好：

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

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

Answer 5

在这里，您还可以应用您想要的任何 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>