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

Question

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

我最初的想法是使用border-bottom执行此操作，但是如何限制边框的宽度以使其不会一直穿过？边界需要在到达文本时停止。

这可能吗？

Answer 1

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

另一种可能（但不推荐）的方法是使用<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;
}