并不是很难，在HTML中，我们可以使用u标签来加下划线，但是在css中我们只能使用text-decoration属性，我们想把下划线设置成红色，只要我们保持和字体的颜色相同就可以了。在css中，我们可以使用text-decoration属性来表示下划线和删除线等样式，首先我们要了解一下text-decoration属性。
text-decoration属性一共有五个值，分别是none，blink，underline，line-through，overline，其中underline就表示下划线。语法如下：
div{text-decoration:none}表示：一般去掉下划线
div{text-decoration:underline}表示一般添加下划线样式
div{text-decoration:line-through}一般表示贯穿线
div{text-decoration:overline}设置上划线样式
设置text-decoration属性的值为none就可去掉超链接的默认下划线。text-decoration属性规定添加到文本的修饰，而none值定义标准的文本，设置该值即可去掉下划线。
属性值：
none：无装饰，通常对html下划线标签去掉下划线样式
underline：下划线样式
line-through：删除线样式-贯穿线样式
overline：上划线样式
注释：修饰的颜色由 "color" 属性设置。
说明
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.demo a{
text-decoration: none
}
</style>
</head>
<body>
<p>
<a href="#">这是一个正常链接，有下划线！</a>
</p>
<p class="demo">
<a href="#">去掉下划线的链接！</a>
</p>
</body>
</html>
chrome 查看元素里被横线划掉的css，是因为属性的不支持或者层次被覆盖，解决方法如下：
1、首先新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签、span标签创建商品价格的显示。
3、在test.html文件内，使用<style type="text/css"></style>标签来标识css代码编写区。
4、在css标签内，创建div，span标签的样式设置。
5、在css标签内，设置div的样式，使用font-size设置字体大小为20px，line-height设置行高为50px。
6、在css标签内，设置span的样式，使用color设置文字颜色为红色，text-decoration设置删除线的效果。
7、在浏览器打开test.html页面，可见，实现了将价格划掉的效果。
