Boj*_*les 174
使用:before伪元素有一种hacky方法.您给出:before一个边框,然后使用CSS变换旋转它.这样做可以为DOM添加额外的元素,添加/删除删除线就像添加/删除类一样简单.
注意事项
- 这只适用于IE8.IE7 不支持
:before,但将在浏览器中正常降级不支持:before,但不支持CSS变换. - 旋转角度是固定的.如果文本较长,则该行不会触及文本的角落.请注意这一点.
CSS
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
HTML
<span class="strikethrough">Deleted text</span>
- 你是对的,对不起.IE8将优雅地降级为正常的删除线.我应该说清楚 (3认同)
- 需要考虑的另一个警告 - 如果您的文本分为两行,删除线将无法按预期呈现:http://d.pr/i/1dKP5 (3认同)
use*_*ser 44
您可以使用背景linear-gradient与currentColor避免硬编码字体颜色:
.strikediag {
background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
padding: 0 0.15em;
}The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.如果您不需要元素完全内联,则可以使用伪元素将线放在元素的顶部.这样可以通过更改伪元素的大小来调整角度:
.strikediag {
display: inline-block;
position: relative;
}
.strikediag::before {
content: '';
position: absolute;
left: -0.1em;
right: -0.1em;
top: 0.38em;
bottom: 0.38em;
background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
pointer-events: none;
}The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.del {
position:relative;
text-decoration:none;
}
del::after {
content:"";
position:absolute;
top:50%; left:0; width:100%; height:1px;
background:black;
transform:rotate(-7deg);
}
我认为您可以将旋转效果应用于水平标尺。就像是：
<html>
<body>
<hr />
123456
</body>
</html>
使用CSS：
hr
{
width: 50px;
position: absolute;
background-color: #000000;
color: #000000;
border-color: #000000;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
}
不过，您的里程可能会根据浏览器和版本的不同而有所不同，所以我不确定是否会诉诸于此。例如，您可能需要编写一些时髦的 VML 代码来支持旧版本的 IE。
增强上面 Bojangles 的答案：
.strike-diagonal-price {
position: relative;
background-color: black;
color: white;
}
.strike-diagonal-price:before {
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
现在我得到了我需要的效果：
