1. 在 HTML 中添加一个 li 元素，并给它一个标题，例如：
<li>这是一个列表项</li>
<li>这是一个列表项</li>
<li>这是一个列表项</li>
</ul>
2. 在 CSS 中定义一个类名，用于给 li 元素添加下划线，例如：
list-style-type: none;
li:first-child {
background-color: #999;
color: #fff;
padding: 5px;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
li:last-child {
background-color: #999;
color: #fff;
padding: 5px;
border-bottom: 1px solid #ccc;
在上面的 CSS 代码中，大家定义了一个名为 “ul” 的类名，用于给整个列表添加下划线。同时，大家定义了一个名为 “li” 的子类名，用于给列表项添加下划线。在 “li:first-child” 样式中，大家设置了列表项的 background-color 为 #999，并设置了其 color 和padding 属性。在 “li:last-child” 样式中，大家设置了列表项的 background-color 为 #999，并设置了其 color 和padding 属性。
3. 使用浏览器的开发者工具，检查代码的渲染效果。打开一个浏览器的开发者工具，查看 li 元素是否被添加了下划线。
通过以上步骤，大家成功将 li 元素添加上了下划线。需要注意的是，当使用 background-color 属性为 li 元素的 color 时，如果 li 元素自身的 color 属性不是 #999，那么下划线就不会显示。大家可以使用 background-color: #999; 和 color: #fff; 两个属性来同时添加下划线。