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

让我们保持标记尽可能简单;我们可以使用标题的一个元素和:before的伪元素z-index: -1;来执行此操作。

Have an example!

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

Answer 3

创建标题的副本和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/

无法创建水平线穿过的标题

3 个答案: