In my experience the
<span style='color:red;text-decoration:line-through'><span style='color:black'>black with red strikethrough</span></span>isn't the best option. I had a co worker use this method without testing cross browser, so I had to go back and fix it because it caused issues in firefox. My personal recommendation would be to use the :after selector to create a strikethrough. That way it can go back to IE8 if you really wanted to without any style conflicts as well as solid across all other browsers.
It also creates less markup and about the same amount of styling which in my opinion is a pretty big deal.
So if anyone else runs into similar issues hopefully this can help out:
.lineThrough { position: relative;&:after { content: ""; display: block; width: 60px; height: 1px; background: red; position: absolute; top: 49%; left: 50%; margin-left: -30px; }}obviously you could use transform: translate instead of margins, but this example is to work back to IE8