我正在使用删除线标签:
<s>$5,000,000</s>
但是这条线太低了...它离底部大约1/4的位置,而不是通过中间。有没有办法修改它,使其更加接近中间一些?
我正在使用删除线标签:
<s>$5,000,000</s>
但是这条线太低了...它离底部大约1/4的位置,而不是通过中间。有没有办法修改它,使其更加接近中间一些?
<!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>
使用删除线标签或text-decoration:line-through
样式是不行的。删除线位置是内置的。你可以自己编写样式,但这将是一件非常麻烦的事情。
十一年后,这是一个非常简单的任务:
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>
通常,你可以使用 text-decoration: line-through
,但是目前无法改变line-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>
这个解决方案允许填充,并使用css的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 style="text-decoration: line-through;">
更加有用。虽然strike标签已经被弃用了。 - Rory O'Kane