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

时间:2016-04-17 20:00:55

标签: css3 line-through

是否可以更改包装文本中的线条颜色?我的意思是,例如,黑色文字和红线!?

enter image description here

2 个答案:

答案 0 :(得分:2)

你可以做一些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>

答案 1 :(得分:1)

抱歉,我会在一分钟内发布正确答案:)(误读)

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;
}
<p>hello <span class="redline">crazy</span> world!</p>