CSS: Line-through With A Color Different From The Text Color?


Answer :

You can simulate the desired effect with two nested elements, e.g.:





        span.inner {
color: green;
}
span.outer {
color: red;
text-decoration: line-through;
}

<span class="outer">
<span class="inner">foo bar</span>
</span>





jsfiddle



With no extra DOM (but may not work for some layouts for obvious reasons):



<style type="text/css">
.strikethrough {
position: relative;
}

.strikethrough:before {
border-bottom: 1px solid red;
position: absolute;
content: "";
width: 100%;
height: 50%;
}
</style>

<span class="strikethrough">Foo Bar</span>


A jsfiddle example here.



It's not possible to make a line-through with a different color. It will be in the color you define with property color.



see http://www.w3.org/TR/CSS2/text.html#lining-striking-props



EDIT:



what came into my mind is to use a background-image with a 1px * 1px color dot in the color you like.



CSS:



.fakeLineThrough {
background-image: url(lineThroughDot.gif);
background-repeat: repeat-x;
background-position: center left;
}


HTML:



<span class="fakeLineThrough">the text</span>


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools