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
Post a Comment