创建水平线交叉的标题时出现问题

Question

我想创建有一条水平线穿过它们的标题，标题文本出现在该行上方，即使我相信我已经正确使用了 z-index 规则它仍然不起作用，这是我正在使用的 css;

.heading {
border-bottom: 2px solid #222222!important;
text-align: center;
z-index: -1;
}
#sidebar .widget h3, #sidebar .widget .heading h3 {
color: #333333;
text-align: center;
z-index: 10;
margin-bottom: -8px;
position: relative;
}

网址是：http://crossfitblackboard.com/

Answer 1

z-index

仅当您使用position时才有效

因此，您还需要将.heading设置为position: relative

Answer 2

创建标题的副本并line-through它。

.HTML：

<h1 class="shadow">Your Awesome Heading</h1>
<h1>Your Awesome Heading</h1>

.CSS：

h1{
    position: absolute;
}
.shadow{
    color: lightgrey;
    text-decoration: line-through;
}

这是小提琴：http://jsfiddle.net/39rwmjt6/1/

Answer 3

让我们保持标记尽可能简单;我们可以为您的标题使用一个元素来做到这一点，而伪元素:before带有 z-index: -1; .

举个例子！

.HTML

<h1>Heading</h1>

.CSS

h1 {
    position: relative;
    text-align: center;
    font-size: 1em;
}
h1:before {
    position: absolute;
    content: '';
    height: 2px;
    background: #F00;
    display: block;
    width: 100%;
    top: 0.6em;
    z-index: -1;
}