Question

我正在尝试使用<hr>标记来设置样式，并为我网站的某些部分添加不同的标题。我正在使用CSS伪元素将标题文本添加到<hr>元素。

我的HTML看起来像：

<div id="steps">
    <div id="step1"><hr class="stepheading">contentcontent</div>
    <div id="step2"><hr class="stepheading">contentcontent</div>
    <div id="step3"><hr class="stepheading">contentcontent</div>
    <div id="step4"><hr class="stepheading">contentcontent</div>
</div>

我的CSS看起来像：

hr.stepheading{
    padding: 0;
    border: none;
    border-top: medium double #333;
    text-align: center;
    color: #333;
    margin: 130px 0px;
}

hr.stepheading:after{
    content: "The First Step";
    position: relative;
    top: -0.7em;
    display: inline-block; 
    padding: 0 0.25em;
    background: white;
}

所以，我可以看到问题在于我的每一个标题都包含“第一步”而不是其他步骤的其他标题。

Demo

我希望每个标题都有不同的标题：“第一步”，“第二步”等......

我该怎么做以及我使用什么技术？这可以用纯HTML和CSS完成，还是我必须使用Javascript / JQuery来实现我想要的？

Answer 1

在nth-child()元素上使用div：

hr.stepheading:after{
    content: "The First Step";
    position: relative;
    top: -0.7em;
    display: inline-block; 
    /* Other details */
}

div:nth-child(2) hr.stepheading:after{
    content: "The Second Step";
}
div:nth-child(3) hr.stepheading:after{
    content: "The Third Step";
}
div:nth-child(4) hr.stepheading:after{
    content: "The Fourth Step";
}

演示：http://jsfiddle.net/bQBgL/4/

Answer 2

#step2 hr.stepheading:after { content: "The Second Step"; }
#step3 hr.stepheading:after { content: "The Third Step"; }

等...

Answer 3

查看此演示：http://jsfiddle.net/gLQ37/

HTML：

<div id="steps">
 <div id="step1"><h1 class="stepheading"id="hr1"></h1>contentcontent</div>
 <div id="step2"><h1 class="stepheading" id="hr2"></h1>contentcontent</div>
 <div id="step3"><h1 class="stepheading" id="hr3"></h1>contentcontent</div>
 <div id="step4"><h1 class="stepheading" id="hr4"></h1>contentcontent</div>
</div>

CSS：

h1.stepheading{
padding: 0;
border: none;
border-top: medium double #333;
text-align: center;
color: #333;
margin: 130px 0px;
}

h1.stepheading:after{
position: relative;
top: -0.7em;
display: inline-block; 
padding: 0 0.25em;
background: white;
}

#hr1:after{content: "The First Step";}
#hr2:after{content: "The Second Step";}
#hr3:after{content: "The Third Step";}
#hr4:after{content: "The Fourth Step";}

将不同的文本标题应用于具有相同类的html <hr />元素

3 个答案: