Posts

Showing posts with the label Strikethrough

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 : w...