HTML元素del
,strike
或s
都可用于文字删除效果。例子:
<del>del</del>
....给出: del
<strike>strike</strike> and <s>strike</s>
....给出: strike 和 strike
可以类似地使用值text-decoration
的CSS line-through
属性。代码......
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...也将渲染为: text-decoration:line-through
但是,删除线通常与文本颜色相同。
可以使用CSS将线条设为不同的颜色吗?
答案 0 :(得分:389)
是的,通过添加额外的包装元素。将所需的直通颜色指定给外部元素,然后将所需的文本颜色指定给内部元素。例如:
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>
...或...
<strike style='color:red'>
<span style='color:black'>black with red strikethrough<span>
</strike>
(但请注意,<strike>
为considered deprecated in HTML4 and obsolete in HTML5(see also W3.org)。建议的方法是使用<del>
如果意图删除的真正含义,或者使用带有<s>
CSS的text-decoration
元素或样式,如此处的第一个示例所示。)
要为a:hover显示删除线,必须使用显式样式表(在<HEAD>
中声明或引用)。 (:hover
伪类不能与内联STYLE属性一起应用。)例如:
<head>
<style>
a.redStrikeHover:hover {
color:red;
text-decoration:line-through;
}
</style>
</head>
<body>
<a href='#' class='redStrikeHover'>
<span style='color:black'>hover me</span>
</a>
</body>
href
生效之前,IE7似乎需要在<a>
上设置一些:hover
;基于FF和WebKit的浏览器不需要。{p>
答案 1 :(得分:66)
截至2016年2月,CSS 3具有以下支持。以下是WooCommerce单一产品页面的价格折扣
/*Price before discount on single product page*/
body.single-product .price del .amount {
color: hsl(0, 90%, 65%);
font-size: 15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}
CSS 3可能会使用text-decoration-color
property直接支持。特别是:
text-decoration-color
CSS属性设置绘制text-decoration-line
指定的下划线,上划线或删除线时使用的颜色。这是为这些文本装饰着色的首选方法,而不是使用其他HTML元素的组合。
另见text-decoration-color
in the CSS 3 draft spec。
如果您想立即使用此方法,则可能需要使用-moz-text-decoration-color
作为前缀。 (为了向前兼容,也请指定它而不是-moz-
。)
答案 2 :(得分:31)
我使用了一个空的:after
元素并在其上装饰了一个边框。您甚至可以使用CSS变换将其旋转为斜线。 Result: pure CSS, no extra HTML elements!下行:不包含多行,尽管IMO你不应该在大块文本上使用删除线。
s,
strike {
text-decoration: none;
/*we're replacing the default line-through*/
position: relative;
display: inline-block;
/* keeps it from wrapping across multiple lines */
}
s:after,
strike:after {
content: "";
/* required property */
position: absolute;
bottom: 0;
left: 0;
border-top: 2px solid red;
height: 45%;
/* adjust as necessary, depending on line thickness */
/* or use calc() if you don't need to support IE8: */
height: calc(50% - 1px);
/* 1px = half the line thickness */
width: 100%;
transform: rotateZ(-4deg);
}
&#13;
<p>Here comes some <strike>strike-through</strike> text!</p>
&#13;
答案 3 :(得分:6)
添加到@gojomo,您可以使用:after
伪元素作为附加元素。唯一需要注意的是,由于CSS具有有限的innerText
功能,因此您需要在data-text
属性中定义content
。
s {
color: red;
text-align: -1000em;
overflow: hidden;
}
s:after {
color: black;
content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>
答案 4 :(得分:5)
这是一种使用渐变伪造线条的方法。它适用于多线攻击,不需要额外的DOM元素。但是因为它是背景渐变,所以它在文本背后......
del, strike {
text-decoration: none;
line-height: 1.4;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
-webkit-background-size: 1.4em 1.4em;
background-size: 1.4em 1.4em;
background-repeat: repeat;
}
请参阅小提琴:http://jsfiddle.net/YSvaY/
渐变颜色停止和背景大小取决于行高。 (之后我使用了LESS进行计算和Autoprefixer ......)
答案 5 :(得分:5)
如果你不关心internet explorer \ edge,那么实现不同颜色的最简单方法就是使用CSS属性: text-decoration-color 与text-decoration结合使用:line-through;
.yourClass {
text-decoration: line-through !important;
text-decoration-color: red !important;
}
- 不适用于Edge \ Internet Explorer
答案 6 :(得分:4)
你走了:
@Service
public class EtudiantServiceImpl {
@Autowired
EtudiantRepository etudiantRepository;
List<Etudiant> lst = new ArrayList<Etudiant>();
public List<Etudiant> getAllEtudiant() {
lst = this.etudiantRepository.findAll();
return lst;
}
}
答案 7 :(得分:3)
根据我的经验
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>
不是最好的选择。我有一个同事使用这种方法而不测试跨浏览器,所以我不得不回去修复它,因为它在firefox中引起了问题。我个人的建议是使用:after选择器来创建删除线。这样它就可以回到IE8,如果你真的想要没有任何风格冲突,并且在所有其他浏览器中都是可靠的。
它还创建了更少的标记和大约相同数量的样式,在我看来这是一个非常重要的事情。
因此,如果其他人遇到类似的问题,希望这有助于:
.lineThrough {
position: relative;
&:after {
content: " ";
display: block;
width: 60px;
height: 1px;
background: red;
position: absolute;
top: 49%;
left: 50%;
margin-left: -30px;
}
}
显然你可以使用transform:translate而不是margin,但这个例子是回到IE8
答案 8 :(得分:2)
Blazemonger的回复(上方或下方)需要投票 - 但我没有足够的积分。
我想在一些20px宽的CSS圆形按钮上添加一个灰色条,表示“不可用”并调整了Blazemonger的CSS:
.round_btn:after {
content:""; /* required property */
position: absolute;
top: 6px;
left: -1px;
border-top: 6px solid rgba(170,170,170,0.65);
height: 6px;
width: 19px;
}
答案 9 :(得分:2)
此CSS3将使您更轻松地遍历属性,并且工作正常。
span{
text-decoration: line-through;
text-decoration-color: red;
}
答案 10 :(得分:1)
如果它对某人有帮助,您可以使用 css 属性
browser.contextMenus.create({
id: "showtext",
title: "Show text",
contexts: ["selection"]
});
browser.contextMenus.onClicked.addListener(function (info, tab) {
switch (info.menuItemId) {
case "showtext":
{
console.log(info.selectionText);
// alert() doesn't work here
// looking for alternative
}
}
});
答案 11 :(得分:0)
为父元素指定所需的直通颜色也适用于已删除的文本元素(<del>
) - 假设客户端将<del>
呈现为直通。
答案 12 :(得分:0)
单一属性解决方案是:
.className {
text-decoration: line-through red;
};
在 line through 属性后定义颜色。
答案 13 :(得分:-4)
这是一个jQuery实现示例 - 感谢gojomo的回答和utype的建议(两者都是+1)
$(function(){
//===================================================================
// Special price strike-out text
// Usage:
// Normally: <span class='price'>$59</span>
// On special: <span class='price' special='$29'>$59</span>
//===================================================================
$(".price[special]").each(function() {
var originalPrice = $(this).text();
$(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
.removeAttr('special')
.addClass('special');
});
});
CSS可能是
.price strike, .price.special { color: Red; }
.price strike span { color: Black; }