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

Posted 2023-05-07

【中文标题】如何更改链接的线条/删除线颜色？

【英文标题】：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。伪元素似乎是一个不错的方法。它们易于创建和管理。

【参考方案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>

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

【讨论】：

或者，如果由于某种原因你真的想添加额外的元素（我建议不要这样做，但总是有那些边缘情况）你可以把 放在 之外: 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;

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

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>