一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
1 用到的知识点是html中 tex-decoration 属性；text-decoration的属性包括 ： {text-decoration:overline}
{text-decoration:line-through}
{text-decoration:underline}
{text-decoration:blink}
将价格划掉的效果 用到的是line-through值。
2 下面是tex-decoration 的使用案例，代码可以直接复制到浏览器上面进行运行。
<html>
<head>
<style type="text/css">
h2 {text-decoration: line-through}
</style>
</head>
<body>
<h2>20元</h1>
</body>
</html>
3 下面是案例在浏览器上运行的效果图 ：
