css 是否更改删除线的垂直位置？

i7uaboj4 于 2024-01-09 发布在其他

关注(0)|答案(9)|浏览(139)

我在使用strikeout标签：

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

字符集
但是这条线太低了....它是从底部开始的1/4，而不是从中间穿过的。有什么方法可以修改它，让它从中间多穿一点吗？

css

来源：https://stackoverflow.com/questions/2503364/change-vertical-position-of-strike-through

9条答案

按热度按时间

huus2vyu1#

你不能用strike标签或者text-decoration:line-through样式来做。行的位置是内置的。你可以为它滚动你自己的样式，但这将是一个巨大的皮塔。

赞(0）回复(0）举报 2024-01-09

khbbv19g2#

我已经炮制了这个代码，让你完全控制删除线的位置和风格：

<!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>

字符集

赞(0）回复(0）举报 2024-01-09

6ju8rftf3#

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

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);
}

个字符

赞(0）回复(0）举报 2024-01-09

vuv7lop34#

它是浏览器渲染引擎的一部分。对我来说（在Chrome中），这条线被渲染在中间上方。

赞(0）回复(0）举报 2024-01-09

kcrjzv8t5#

2021解决方案

通常情况下，您会使用text-decoration: line-through，但您目前无法更改line-through行的位置。
但幸运的是，由于新的CSS属性text-underline-offset，您可以 * 更改“underline”的位置。
它是这样工作的：

.strike {
  text-decoration: underline;
  text-underline-offset: -.4em;
}

个字符
虽然你可能会注意到这行看起来有点不稳定，这是由于相对较新的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除外。

赞(0）回复(0）举报 2024-01-09

pxiryf3j6#

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

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

赞(0）回复(0）举报 2024-01-09

b4qexyjb7#

你可以这样做：

<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

赞(0）回复(0）举报 2024-01-09

scyqe7ek8#

一次性使用的替代解决方案...

.strike {
  position: relative;
  right: 15px;
  top: -8px;
  margin-right: -15px;
}

个字符

赞(0）回复(0）举报 2024-01-09

tzcvj98z9#

我的解决方案：

.strike{
    display: inline-block;
    position: relative;
}
.strike::after {
    background-color: #d90404;
    content: "";
    height: 1px;
    left: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    opacity: 60%;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 是否更改删除线的垂直位置？

9条答案

2021解决方案

相关问题

热门标签

最新问答