Question

我正在尝试制作左侧有一些文字的横向规则。

例如：

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

我可以通过在文本中添加背景但没有彩色背景来实现，但我不能

有人有答案吗？

<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>

由于

Answer 1

你建议在跨度上加上背景颜色似乎工作得相当好。 See it here.

或者，您可以使用背景图片代替h1上的边框。

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

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

Example.

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

Answer 2

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

<style>   

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

在这种情况下，您使用的是CSS：伪类之后。请查看this article以检查跨浏览器兼容性。 here你会找到一个预先编码的例子。

希望它有所帮助！

CSS标题，中间有一条水平线

2 个答案: