<span style="color:rgba(0,0,0,0.4); font-size:0.6rem;"> 原价1500元/月</span>代码中如果要给文本加上划掉线应该如何写
时间: 2024-10-05 11:02:06 浏览: 21
在`<span>`标签中的文本想要加上删除线(斜杠线),通常我们会使用CSS的`text-decoration`属性,并结合`:before`伪元素来模拟删除线效果。这里是一个简单的例子:
```html
<span style="color: rgba(0, 0, 0, 0.4); font-size: 0.6rem;">
<span style="position: relative;">原价<del style="position: absolute; top: -1px; left: 2px; text-decoration: line-through; color: inherit;">1500元/月</del></span>
</span>
```
在上面的代码中,我们首先在原始文本前添加了一个`<del>`标签,它会显示为删除线样式。`position: absolute`使得`<del>`不会影响到其他文字的布局,而`top: -1px`和`left: 2px`是为了调整删除线的位置使其与原价对齐。`color: inherit;`会让删除线继承母元素的文字颜色。
请注意,由于浏览器渲染限制,删除线效果可能在所有设备上都不是很明显,尤其在较小的字体下。
阅读全文