怎样用CSS设置文本同时也体现下划线和删除线？

划水。 当前这个事情其实很简洁，但是我还是要写一篇文章来告诉你怎么弄。

好吧... 先来看，你得了解CSS中的text-decoration属性是干啥的。当前这个属性能够让你给文字加上下划线、删除线、上划线等等装饰效果。

text-decoration基础

比如说 你想给一个链接加下划线，你能够这样写：

a { 
  text-decoration: underline;
}

这样，全部链接都会有下划线了。

是吧？ 如果你想让文字中间有一条横线， 表示当前这个内容被删除了你能够用：

del, strike { 
  text-decoration: line-through;
}

这在体现陈旧市场价格或者修改前的内容时很有用。

现代化浏览器很牛， 能够让你为text-decoration设置更多个不同值，而且顺序不限！比如说 你想让链接在鼠标悬停时既有下划线又有删除线，还要是红色的波浪线，你能够这样写：

a:hover { 
  text-decoration: underline line-through red wavy;
}

天啊，这么更多效果！实际情况是这会让链接在悬停时出现红色波浪形的下划线和删除线，精神内耗。。

如果你只是想简洁地同时也体现下划线和删除线， 能够直接组合采用更多个不同装饰值：

p { 
  text-decoration: underline line-through;
}

这样，段落中的文字就会同时也有下划线和删除线了，太治愈了。。

text-decoration还有一些子属性， 比如text-decoration-c 对吧，你看。 olor和text-decoration-style能够让你自定义装饰线的颜色和样式。

p {   text-decoration-line: underline line-through;   text-decoration-color: red;   text-decoration-style: wavy; }，简单来说...

乱七八糟的例子， 不懂就别管了省的头疼！

span {   decoration: blink; }

用良好text-decoration，让你的文本更生动！

说句实话… 掌握了text-decoratioin 属性，你就能够轻巧松地为文本添加各种装饰效果，让你的网页更加丰富有更多彩。别再犹豫了赶紧试试吧！

哦，对了如果你还是不了解我在说啥，就去查查文档，或者问问较大神吧！我懒得阐述了。拜拜~，精辟。