6

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?

Paulo Mattos
  • 18,845
  • 10
  • 77
  • 85
amit thakkar
  • 225
  • 2
  • 4
  • 10
  • 1
    Some more info on this at http://stackoverflow.com/questions/2503364/can-i-change-the-vertical-position-of-a-strike-through-on-a-website –  Nov 21 '11 at 17:21
  • Try increasing/decreasing your line height.You can also try other typefaces. Other than that i think youre pretty much stuck with what you get unless there is something in CSS3 that may help, but even if ther eis its probably not going t be consistent cross browser. – prodigitalson Nov 21 '11 at 17:21

3 Answers3

15

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

J. Holmes
  • 18,466
  • 5
  • 47
  • 52
11

I found a solution for it utilizing psuedo elements http://jsfiddle.net/urjhN/

.strike-center {
    position: relative;
    white-space: nowrap; /* would center line-through in the middle of the wrapped lines */
}

.strike-center:after {
    border-top: 1px solid #000;
    position: absolute;
    content: "";
    right: 0;
    top:50%;
    left: 0;
}

However this technique fails if the text is wrapped between lines, the line would be centered among those lines.

It seems to work among all major browsers; for IE7 (and prior) you could just fallback to the classic line-through using conditional comments.

Jona
  • 2,087
  • 15
  • 24
  • 1
    This is an excellent solution. For me, 'top: 50%' rendered slightly different cross-browser (our designers were concerned about pixel perfection), but changing this to bottom in terms of px was browser consistent, although font-size sensitive. – Sam Svenbjorgchristiensensen Sep 15 '15 at 22:25
  • An (obscure) problem that I came across with this is that text movement doesn't get animated pixel-perfectly in sync with this border in most browsers (Chrome was fine, firefox, I.E. and Safari weren't), causing the strikethrough to jiggle relative to the text if both are transitioned. We solved this by replacing the border with content as a string of underscores and then hid the overflow to chop off excess. This text was animated pixel-perfectly with the text underneath. – Sam Svenbjorgchristiensensen Sep 20 '15 at 23:23
  • 1
    In my case, in additional to this answer, setting `.strike-center` display to `inline-flex`, helped for: 1)line-through the only text, not the whole block. 2)more centered line on Persian text. – Asef Hossini Jul 29 '21 at 14:44
3

There is no way to control the offset/placement of a strike-through, but, there is a way for controlling this using for text-decoration: underline using the below combination:

span {
  background: lightyellow;

  text-decoration: underline;
  text-underline-offset: -40%; /* <-- this */
  text-decoration-skip-ink: none;
}

output { display:inline-block; width:50px; }
<output>-40%</output>
<input type='range' min='-100' max='100' value='-40' oninput='this.nextElementSibling.style.textUnderlineOffset=this.value+"%"; this.previousElementSibling.innerHTML=this.value+"%"'/>

<span>Text with strike-through</span>

Here's a Codepen of mine with an alternative strike-through approach: https://codepen.io/vsync/pen/KKQoVRZ

vsync
  • 118,978
  • 58
  • 307
  • 400