23

我正在应用删除标记：

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

但是这条线太低了……它距底部大约 1/4，而不是穿过中间。有什么办法可以修改它，让它在中间多一点？

4

7 回答 7

9

你不能用罢工标签或text-decoration:line-through风格来做到这一点。线位置是内置的。你可以为此推出自己的风格，但这将是一个巨大的 PITA。

于 2010-03-23T20:50:49.817 回答
9

我已经编写了这段代码，它可以让您完全控制删除线的位置和样式：

<!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>
于 2010-03-23T21:20:44.777 回答
2

没有罢工标签，不。它是浏览器渲染引擎的一部分。对我来说（在 Chrome 中），这条线在中间上方呈现。

于 2010-03-23T20:37:52.820 回答
2

十一年后，这是非常简单的任务：

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>

于 2021-03-25T07:19:23.510 回答
1

此解决方案允许填充，并使用 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>

另一种解决方案是添加线条的背景图像，并使其与文本颜色相同。

于 2010-07-22T13:43:05.937 回答
0

你可以这样做：

<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

于 2014-10-06T17:57:09.050 回答
0

2021解决方案

通常，您会使用text-decoration: line-through，但您目前无法更改“ line-through ”线的位置。

但幸运的是，借助新的 CSS 属性，您可以更改“下划线text-decoration-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 之外，浏览器支持很普遍。

于 2021-11-04T20:07:41.533 回答