Change vertical position of strike-through?

开发者 https://www.devze.com 2022-12-23 18:06 出处：网络

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 mo

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 mor开发者_Go百科e through the middle?

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.

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>

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>

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.

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.

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-decoration-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.

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