Html 为什么可以'；是否添加黑线下划线字符？

我想在一些字符上添加一条黑线，黑线是背景照片。
请将文件下载为line.gif，并将以下css代码保存为name

insert_line.html

到与line.gif相同的目录中

正文{
宽度：1000px；
边距：0自动；}
.prod_list_title_bar{
宽度：1000px；
高度：40px；
浮动：左；
线高：18px；
字体大小：15px；
颜色：#5656；
背景：url（../line.gif）无重复中心；}

书

要在CSS中添加一行内容，只需给它一个边框：

.prod_list_title_bar {
    border-bottom:1px solid #cccccc;
    padding-bottom:5px; /*This is to set the distance from the words*/
    margin-bottom:10px; /*This is to set the distance to the top of the next line*/
}

该示例中还包括“在某些字符上添加一条黑线”，如果我阅读正确，这意味着您希望该行仅位于某个单词下

既然你真的想把这张照片放在你的话下面，下面就是发生的事情

您的word容器不够大，无法看到图像的底部。您可以增加

行高

以查看图像底部，也可以使用

背景位置：底部

.prod_list_title_bar {
    background-image: url('http://i.stack.imgur.com/LSc6d.gif');
    background-position: bottom;
    padding-bottom: 5px;
}

更新的Fiddle显示：
我们不下载文件。你的工作是创建包含这些文件的演示…为什么不使用边框？为什么你说“某些字符上有一条黑线”，而它看起来只是下划线或底边？我能问一下你的线条有什么特别之处吗，你不能通过CSS创建它，至少减少1次服务器调用。我知道设置
边框底部：1px solid
的方法，但是为什么我的CSS代码不能在
书籍
下面加下划线？@it\u是一本书，我已经更新了上面的代码以适应你的图像。单词的高度可能不足以使其容器高到足以看到行的底部。