我正在应用删除线标签：
<s>$5,000,000</s>
但是这条线太低了……大约是从底部开始的 1/4，而不是穿过中间。有什么办法可以修改它，让它在中间多一点吗？
您不能使用罢工标签或
text-decoration:line-through我编写了这段代码，它可以让您完全控制删除线位置和样式：
<!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>
十一年后，这是相当简单的任务：
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>没有罢工标签，不。它是浏览器渲染引擎的一部分。对我来说（在 Chrome 中）该线呈现在中间上方。
通常，您会使用
text-decoration: line-throughline-through但幸运的是，借助新的 CSS 属性text-underline-offset，您可以
更改“下划线”的位置。
其工作原理如下：
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}<p>Only <span class="strike">$199.99</span> $99.99!</p>尽管您可能会注意到这条线看起来有点不稳定。这是由于相对较新的
text-decoration-skip-ink幸运的是，我们可以关闭该功能，以及一些额外的漂亮的颜色和厚度属性，这是最终结果：
.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>浏览器支持广泛，目前 Safari 除外。
此解决方案允许填充，并使用 csss line-through 属性 它适用于 Firefox，而 chrome/ safari 无论如何都可以。
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; }
标记就像......
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
另一种解决方案是添加一条线的背景图片，并使其与文本颜色相同。
你可以这样做：
<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;
}
替代解决方案
<span>17<span style="position: relative;left: 14px;top: -6px;margin-left: -14px;">__</span></span>