How can I achieve underneath diagonal strikethrough text in CSS?

Question

For example, if you look at the image here:

Is it possible to create the love' hate part? where the hide text is a little-but underneath the Love text? And also, how can I cross out the hate text?

Answer 1

yes, it is possible, but I don't recommend doing it that way

for the stroke: simply create an element and rotate it a bit

for the "underneath" look: use position: relative (absolute), margins, paddings etc.

here is live example: http://jsfiddle.net/78qpE/1/

Answer 2

If you want the image to look like the one you attached, it would be done in a program like Illustrator, but it is unclear if this is what you want. Can you elaborate at all, or provide code for what you are trying to do? It is possible to have both "Love" and "Hate" in separate DIVs, positioned by CSS. If it is only text, there are CSS controls for strikethrough as well.