CSS从文本中删除了不同的颜色？
HTML元素del,strike或者s可以全部用于文本删除效果.例子:
<del>del</del>
....得出: 德尔
<strike>strike</strike> and <s>strike</s>
....给:罢工和罢工
可以类似地text-decoration使用具有值的CSS 属性line-through.代码...
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...也将呈现为:text-decoration:line-through
但是,删除线通常与文本颜色相同.
CSS可以用来使线条变成不同的颜色吗？
goj*_*omo 399
是的,通过添加额外的包装元素.将所需的直通颜色指定给外部元素,然后将所需的文本颜色指定给内部元素.例如:
<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>(但请注意,在HTML4中<strike>被认为已弃用,在HTML5中已被废弃(另请参阅W3.org).建议的方法是使用<del>if的真正意义,或者使用CSS中的<s>元素或样式,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在<a>之前设置一些:hover效果; FF和基于WebKit的浏览器不会.)
- @utype为什么要使用jQuery呢？ (38认同)
- 我的"那是不可能的!" 回答. (8认同)
- 包装元素有点糟糕.在大多数情况下,你可以用简单的伪元素实现几乎相同的效果,即`del {position:relative}`然后`del :: after {content:'',position:absolute; 最高:50%; 左:0; 右:0; border-bottom:1px solid#f00}`. (4认同)
- 只是一个包装.巧妙.哦,天哪,这比我提出的所有内容都要好(伪元素).很好! (2认同)
Mec*_*ail 67
截至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属性.特别是:
该
text-decoration-colorCSS属性设置绘制由指定的下划线,overlines或删除线时使用的颜色text-decoration-line.这是为这些文本装饰着色的首选方法,而不是使用其他HTML元素的组合.
另请参阅text-decoration-colorCSS 3草案规范.
如果要立即使用此方法,则可能必须使用前缀-moz-text-decoration-color.(-moz-为了向前兼容,也请指定它.)
- @BoltClock:它是如何乐观的？它已经在W3C工作草案中,正在积极推行. (5认同)
- 3年后...... Firefox和Safari拥有它= 20%的覆盖率. (4认同)
- 截至 2019 年 3 月，除任何 Microsoft 浏览器外，所有主要浏览器都支持 `text-decoration-color`：https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color#Browser_compatibility (3认同)
- "CSS 3可能会"相当......乐观. (2认同)
- 根据[caniuse](http://caniuse.com/#feat=text-decoration),目前没有浏览器(2014年)支持没有前缀的`text-decoration-color`. (2认同)
Bla*_*ger 32
我使用了一个空:after元素并在其上装饰了一个边框.您甚至可以使用CSS变换将其旋转为斜线.结果:纯CSS,没有额外的HTML元素!下行:不包括多行,尽管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);
}<p>Here comes some <strike>strike-through</strike> text!</p>如果您不关心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
添加到@gojomo可以使用:after伪元素作为附加元素.唯一需要注意的是,由于CSS 功能有限,因此您需要innerText在data-text属性中定义content.
CSS
s {
color: red;
text-align: -1000em;
overflow: hidden;
}
s:after {
color: black;
content: attr(data-text);
}HTML
<s data-text="Strikethrough">Strikethrough</s>这是一种使用渐变来伪造线条的方法.它适用于多线攻击,不需要额外的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 ......)
干得好：
<style>body {color: #000;}</style>
<del> <span style="color:#999">facebook</span> </del>小智 5
此CSS3将使您更加轻松地遍历属性，并且工作正常。
span{
text-decoration: line-through;
text-decoration-color: red;
}