纯Css如何实现双删除线？ |
您所在的位置：网站首页 › htmlcss删除线 › 纯Css如何实现双删除线？ |
纯Css如何实现双删除线？
|
我们知道，在Css世界中，实现单删除线还是比较简单的，通过设置text-decoration的选项即可完成，简单介绍一下text-decoration属性吧。 text-decoration候选值有none、underline、overline、line-through、blink、inherit none不设置,定义一个标准的文本text-decoration:none underline为文本增加下划线text-decoration:underline overline为文本增加上划线text-decoration:overlineline-through为文本单删除线text-decoration:line-throughblink定义闪烁的文本text-decoration:line-throughinherit规定应该从父元素继承 text-decoration 属性的值text-decoration:inherit当然除此单设置之外，还支持复合设置，如: text-decoration: underline wavy green; /* 绿色波浪形下划线 */更多属性大家可以去官方学习文档进行属性的了解和学习。 双删除线 单删除线和双删除线如图可知，什么事双删除线，那么接下来就是如何实现双删除线，实现双删除线方式有很多种，比如：额外两个元素贴附在原文字上面、伪元素的形式等。如下实现方案： 双删除线 * { padding: 0; margin: 0; } span { margin-right: 30px; position: relative; color: #333; } span:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 4px double #333; content: ''; display: block; width: 100%; } 原价：¥ 9998.00 特惠价：¥ 998.00使用伪元素的形式，在文本开头或者尾部插入一个双边框线进行实现，如果大家有更好的实现方案，欢迎评价交流。 |
【本文地址】
今日新闻 |
推荐新闻 |