Question

我想要实现的是这种效果：

enter image description here

h3{
    width: 100%;
    padding-left: 100px;
    position: relative;
}
h3::before{
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: rgb(200, 200, 200);
    position: absolute;
    left: 0;
    top: 50%;
}

使用我目前拥有的代码，该行将直接通过文本。因此，我尝试在文本中应用背景来掩盖这一行：

h3::first-line{
    position: relative;
    z-index: 2;
    display: inline;
    background: white;
}

但它似乎没有起作用：http://jsfiddle.net/DerekL/3PagQ/

有什么想法吗？

一个额外的问题：如何增加文字和线条之间的间隙宽度？我试过了padding: 0 10px但它没有用。

Answer 1

将否定z-index应用于::before伪元素（fiddle）

h3::before {
    z-index: -1;
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: rgb(200, 200, 200);
    position: absolute;
    left: 0;
    top: 50%;
}

我认为在border和pseudo元素之间设置边距的唯一方法是使用box-shadow：

h3::first-line {
    /* .. */
    box-shadow: 10px 0 white,
               -10px 0 white;
}

请注意保证金和填充不适用于::first-line。

Answer 2

制作这个btn，它真的与你想做的一样吗？尝试看看你是否喜欢它的响应性以及支持到IE7

它也是内容感知，可以居中，左或右，或者你可以添加多个框并在行上证明它们

http://nomis.dk/cool-responsive-button/ 也做了一个小提琴http://jsfiddle.net/nomisweb/GJHvD/

<强> HTML

    <div class="btn">
        <div class="btn__horizontal-border"></div>
        <div class="btn__border">
            <div class="btn__text">
                Here is a button
            </div>
        </div>
    </div>

<强> CSS

* {
    box-sizing: border-box;
}
.btn {
    width:100%;
    height:31px;
    text-align: center;
    position:relative;
}
.btn__horizontal-border {
    height: 1px;
    width: 100%;
    background: red;
    position:absolute;
    top: 50%;
    z-index: 0;
}
.btn__border {
    display:inline-block;
    background: #fff;
    height: 31px;
    line-height:31px;
    padding: 0 15px;
    position: relative;
}
.btn__text {
    border: 2px red solid;
    padding: 0 15px;
    display: block;
}
.btn__text:hover {
    color: red;
}

Answer 3

你可以有一个外部div用于定位，然后是一个hr标签，可以用CSS设置样式，文字分层在上面：

<强> Fiddle

<强> HTML

<div>
    <hr><div class="heading">Title</div>
</div>

<强> CSS

.heading {
    position:relative;
    left:80px;
    margin-top:-20px;
    background-color:white;
    width:45px;
    text-align:center;
}

Answer 4

如果您可以使用CSS分配标题的名称，那么解决方案可以更简单，并且可以在旧版浏览器中使用。

HTML：

<h3></h3>

CSS：

h3 {
    position: relative;
    border-bottom: 1px solid #ccc;
    font: 20px/1 Serif;
}

h3:before {
    content: "Title";
    position: absolute;
    margin: -10px 0 0 100px;
    background-color: #fff;
    padding: 0 10px;
}

而且，这是一个小提琴：http://jsfiddle.net/sq3qv/。

将背景应用于:: first-line

4 个答案: