CSS: Strike-through not centered through the text

css strikethrough
amit thakkar picture amit thakkar · Nov 21, 2011 · Viewed 10.1k times · Source

We are using strike-through to actually show oldprice vs new price for a product.

If you open this link, at the bottom of the page, we have a product on sale. http://www.gkelite.com/Gymnastics-Shopby-GiftoftheWeek

The strike-through for the old price is not centered vertically for the text. Can any one help out as to why it's happening?

Answer

J. Holmes picture J. Holmes · Nov 21, 2011

A strike-through is traditionally some percentage (70% to 90%) of the x-height (or the height of a lower case 'x'). If the line were at the 50% of cap-height, it may be possible the strike-through would be above or at the top of any lowercase letter in the set. A strike-through is supposed to put a line through all letters in the text, which is why is gauged from the x-height.

Whether or not browsers actually use the x-height for their strikethrough calculation, this tradition is why is why strike-throughs are displayed short of the 50% of cap height.

See the following illustration for some examples of the terms:

enter image description here

Related questions

How to change the strike-out / line-through thickness in CSS?

I'm using the text-decoration: line-through in CSS, but I can't seem to find any way to vary the line thickness without inelegant hacks like <hr> or image overlays. Is there any elegant way to specify the thickness of …

Read More
Linethrough/strikethrough a whole HTML table row

After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is …

Read More
How to strike through obliquely with css

I need something like this: How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?

Read More