1

我正在尝试使用该<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;
}

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

演示

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

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

4

3 回答 3

0

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/

于 2012-11-16T16:08:26.210 回答
0 
#step2 hr.stepheading:after { content: "The Second Step"; }​
#step3 hr.stepheading:after { content: "The Third Step"; }​

ETC...

于 2012-11-16T16:09:39.307 回答
0

检查这个演示：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";}​
于 2012-11-16T16:14:12.570 回答