为什么不能添加黑线下划线字符？

Question

我想在一些角色上添加黑线，黑线是背景照片 请将文件下载为line.gif，并将以下css代码作为名称insert_line.html保存到与line.gif相同的目录中。

body{
width:1000px;
margin:0 auto;}


.prod_list_title_bar{ 
width:1000px;
height:40px;
float:left;
line-height:18px;
font-size:15px;
color:#565656;
background: url(../line.gif) no-repeat center; }

<div id="container">
<div id="prod_list">
    <div class="prod_list_title_bar">books</div>
</div>
</div>

我想要的是以下内容。 我用我的css代码获得的是以下内容。 为什么我的css代码无法添加line.gif下划线字符books？

Answer 1

在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*/
}

https://jsfiddle.net/92L4pctg/1/

该示例中还包括＆＃34;在某些字符上添加黑线＆＃34;如果我正确读取意味着您想要将该行仅限于某个字词？

既然你真的在询问将这张照片放在你的话语下面，那么这里有什么。

您的单词容器不够大，无法查看图像的底部。您可以增加line-height以查看图片的底部，也可以使用background-position:bottom;

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

更新了小提琴以显示：https://jsfiddle.net/92L4pctg/3/