{CSS} 通过“text-decoration: line-through”在文本上绘制的线条的不同颜色？答案

【问题标题】：{CSS} A different color for the line which is drawn on a text by "text-decoration: line-through"?{CSS} 通过“text-decoration: line-through”在文本上绘制的线条的不同颜色？
【发布时间】：2016-04-17 20:00:55
【问题描述】：

是否可以更改换行文本上的线条颜色？我的意思是，例如，黑色文本和红色线条！？

【问题讨论】：

我添加了正确答案 ;-) 很抱歉误读

标签： css line-through

【解决方案1】：

您可以使用一些 CSS 技巧来做到这一点：

    .line-through-text {
        position: relative;
        color: blue;
    }

    .line-through-text:before {
        border-bottom: 2px solid orange;
        position: absolute;
        content: "";
        width: 100%;
        height: 50%;
    }

<h2>
Hello There! <span class="line-through-text">This is wrong,</span> This is correct
</h2>

【讨论】：

【解决方案2】：

对不起，我会在一分钟内发布正确答案:)（误读）

var pOut = $("span").css("text-decoration"); //line-through
if (pOut == "line-through") {
  $("span").css("color", "red");
}

span {
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>hello <span>crazy world</span> world!</p>

编辑：

span {
  position: relative;
  font-size: 50px;
  padding: 0;
  margin: 0;
}
span.redline:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 55%;
  left: 0;
  border-top: rgba(255, 0, 0, 1) 4px solid;
}

&lt;p&gt;hello &lt;span class="redline"&gt;crazy&lt;/span&gt; world!&lt;/p&gt;

【讨论】：