Html 中间横线的CSS标题

我正试图用左边的一些文字来做一个水平的规则

例如：

我的头衔-------------------------------------

我可以把背景放在文本上，但如果没有彩色背景，我就做不到

有人有答案吗

<style>   
h1 {
    font-weight:normal;
    line-height:0;
    height:0;
    border-bottom:1px solid #000;   
    vertical-align:middle;

}
</style>
<h1><span>my title</span></h1>

h1{
字体大小：正常；
线高：0；
身高：0；
边框底部：1px实心#000；
垂直对齐：中间对齐；
}
我的头衔

---

谢谢，不用背景，您可以尝试：

<style>   

span:after{
    content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>

跨度：之后{
内容：“---------------------------------------”；
}
我的头衔

在本例中，您使用的是CSS:after伪类。 查看以检查跨浏览器兼容性。 你会发现一个预先编码的例子

---

希望有帮助

不使用背景，您可以尝试：

<style>   

span:after{
    content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>

跨度：之后{
内容：“---------------------------------------”；
}
我的头衔

在本例中，您使用的是CSS:after伪类。 查看以检查跨浏览器兼容性。 你会发现一个预先编码的例子

---

希望有帮助

你的建议在跨度上加一个背景色似乎效果不错

或者，您可以使用背景图像代替

h1

上的边框

h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }

h1 span {
    background-color: #FFF;
    padding-right: 3px;
}

---

（背景为1x1黑色图像。）

您的建议在跨度上添加背景色似乎效果不错

或者，您可以使用背景图像代替

h1

上的边框

h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }

h1 span {
    background-color: #FFF;
    padding-right: 3px;
}

---

（背景为1x1黑色图像）。

是文本还是图像？如果下面的回答不能解决您的问题，请澄清您要查找的结果，为什么某些场景不起作用？是文本还是图像？----------------应该是文本还是图像？如果下面的回答不能解决您的问题，请您澄清您正在寻找的结果，以及为什么某些场景不起作用？此解决方案的积极方面是，它可以与任何背景颜色一起工作。缺点是交叉兼容，这个解决方案的积极方面是它可以与任何背景色一起工作。缺点是交叉浏览器兼容，老实说，我建议在跨度上使用背景色，不需要使用额外的图像（尽管图像可以自定义，如果需要的话）+1为通用性。同意。我不能确切地确定想要的结果，所以我提供了另一种选择。老实说，我建议在跨度上使用背景色——不需要使用额外的图像（尽管图像可以自定义，如果需要的话）+1为通用性。同意。我不能确切地确定想要的结果，所以我提供了另一个选择。