23

I'm applying the strikeout tag:

<s>$5,000,000</s>

But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
jeffkee
  • 5,106
  • 12
  • 44
  • 76
  • 5
    strike is deprecated, css has `text-decoration:line-through;` – Simon Fox Mar 23 '10 at 20:39
  • 3
    In an [HTML5](http://en.wikipedia.org/wiki/HTML5) document, for this text (a price that has been changed), [the `` tag](http://www.w3.org/wiki/HTML/Elements/s) is entirely appropriate, and more useful than inline CSS such as ``. [The `` tag](http://www.w3.org/wiki/HTML/Elements/strike) is indeed deprecated, though. – Rory O'Kane Oct 30 '12 at 17:03

7 Answers7

9

You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.

Robusto
  • 31,447
  • 8
  • 56
  • 77
9

I've cooked up this code which gives you total control over strike-through position and style:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css"> 

    .mark {
        border-bottom: 1px solid #000;
        top: -9px; /* Tweak this and the other top in equal, but opposite values */
        position: relative;
    }
    .offsetMark {
        position: relative;
        top: 9px; /* Tweak this and the other top in equal, but opposite values */
    }   

</style>     
</head>     
<body>        
<div>     
    <p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>     
</div>

</body>
</html>
Keith Adler
  • 20,880
  • 28
  • 119
  • 189
  • Quite the solution - just a bit too complex and messy so I won't bother applying it here. The line location seems fine on Windows machines. It's just mac machines that have something weird going on. – jeffkee Mar 23 '10 at 23:37
  • This has been a good help to bypass the Cufon text-decoration non-support. – Hervé Guétin Mar 28 '11 at 13:24
  • In IE8 "Example" is chopped in half. Only the top half of the text "example" is visible, then a solid line, then blank space. – mrbinky3000 May 20 '11 at 20:56
  • IE8 is fine for me, but IE7 seems to ignore the positioning. I guess I could use it to fix firefox, which is what I came here for. – Muhd Apr 03 '12 at 02:07
  • Also the line goes behind the text, which is relevant if you want the strike to have a different color. – Muhd Apr 03 '12 at 23:01
4

Eleven years later it is quite simple task:

s{
  text-decoration: none;
    position: relative;
}

s::before{
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: calc( 50% - 1.5px );
    border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Oleg Korzhukov
  • 606
  • 6
  • 19
2

Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.

Tesserex
  • 17,166
  • 5
  • 66
  • 106
1

This solution allows for padding, and uses the csss line-through property It works for firefox, and chrome/ safari does it right anyway.

div.hbPrice span.linethroughOuter {
    padding: 0 10px 0 0;
    text-decoration: line-through;
    position: relative;
}
div.hbPrice span.linethroughInner {
    position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter,  x:-moz-any-link  { bottom:  2px; }
div.hbPrice span.linethroughInner,  x:-moz-any-link  { top:  2px; }

and the mark up is something like...

<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>

The other solution is to add a background image of a line, and make it the same colour as the text.

Delazi
  • 11
  • 1
1

2021 Solution

Normally, you would use text-decoration: line-through, but you currently can't change the position of a line-through line.

But fortunately, you can change the position of an "underline" thanks to the new CSS property text-underline-offset.

Here is how it works:

.strike {
  text-decoration: underline;
  text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>

Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.

Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:

.strike {
  text-decoration: underline;
  text-underline-offset: -.4em;
  text-decoration-skip-ink: none;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
  color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>

Browser support is widespread with the current exception of Safari.

Michael M.
  • 10,486
  • 9
  • 18
  • 34
pbarney
  • 2,529
  • 4
  • 35
  • 49
0

You could do something like this:

<div class="heading"><span>Test heading</span></div>

.heading {
  position: relative;
  text-align:center;
}
.heading:before {
  background-color: #000000;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.heading span {
  background-color: #fff;
  display: inline-block;
  padding: 0 2px;
  position: relative;
  text-align: center;
}

http://codepen.io/anon/pen/cLBls

John Magnolia
  • 16,769
  • 36
  • 159
  • 270