CODEWITHSUNDEEP
cssstrikethrough
amit thakkar
amit thakkar

Reputation: 255

CSS: Strike-through not centered through the text

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?

Upvotes: 9

Views: 18709

Answers (4)

Никита Тимофеев
Никита Тимофеев

Reputation: 131

It help me. Just setting your top for iOS devices.

// Strike through
.strike-center {
    position: relative;
    white-space: nowrap;
}

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

@supports (-webkit-touch-callout: none) {

    /* CSS specific to iOS devices */
    .strike-center:after {
        top: 40% !important;
    }
}

Upvotes: 1

vsync
vsync

Reputation: 130205

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

Upvotes: 5

Jona
Jona

Reputation: 2147

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.

Upvotes: 17

J. Holmes
J. Holmes

Reputation: 18546

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

Upvotes: 15

Related Questions