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

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

有趣的是，你的第一个例子有效，我想我没想到\xe2\x80\xa6 很高兴知道！

\n\n

您可以使用伪元素来实现这种外观。确保该元素为position:relative，然后定位伪元素absolute、全角（无论您希望该行有多高）和top:[50% - half the height, rounded]。它看起来像这样：

\n\n

\r\n

\r\n

.fancy-strikethrough {\r\n  color: green;\r\n  position: relative; /* lets us position the `::after` relative to this element */\r\n}\r\n.fancy-strikethrough::after {\r\n  content: \'\'; /* pseudo-elements must always have a `content` */\r\n  position: absolute; /* lets us position it with respect to the `.fancy-strikethrough */\r\n\r\n  /* placement */\r\n  left: 0;\r\n  top: 50%;\r\n\r\n  /* make it a line */\r\n  height: 1px;\r\n  width: 100%;\r\n  background: red;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n