width - CSS 边框 - 但宽度仅限于文本

Question

我目前正在开发一个需要标题的网站：

我最初的想法是用border-bottom来做到这一点，但是我将如何限制边框的宽度以使其不会一直穿过呢？边框在到达文本时需要停止。

这可能吗？

Answer 1

边框的长度由它所接壤的元素的大小决定。您可以使用边框底部的文本创建另一个<div>内联：1px; 并且其他边框设置为 0。然后您可以更改边距或宽度<div>以更改线条的长度。请注意，您必须设置宽度，因为<div>默认情况下空的宽度为 0，因此不会显示。

另一种可能（但不推荐）的方法是使用 a<hr>但这些在 HTML 5 中没有得到很好的支持，所以我个人会选择第一种方法。

Answer 2

我能想出的一个解决方案是将标题与background-color页面的背景相同，然后transform: scale()将标题向上，使其溢出其父级的边框，或者缩小父级，使其边框隐藏在标题的后面背景。

见这里的例子：http:
//jsfiddle.net/WjRqC/1/

哦，另外，可以通过制作标题并将其向下移动几个像素来替换缩放position: relative（如果您不希望文本太靠近线条，请给它更多的垂直填充）。实际上这可能比缩放更好，因为它不是 CSS3，所以它更兼容。

看这里：http:
//jsfiddle.net/7affw/1/

Answer 3

h1 {
    background-color: #fff;
    line-height: 1;
    margin: 0;
    display: inline;
    position:relative;
    z-index: 1;
}

h1:after {
    content: '';
    display: block;
    border-bottom: 2px solid;
    position: relative;
    z-index: 0;
    margin-top: -7px;
}