Question

I am trying to use the <hr> tag to style and include different headings for parts of my website. I am using CSS pseudo elements to add the heading text to the <hr> element.

My HTML looks like:

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

My CSS looks like:

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

So, I can see that the problem is that every single one of my headings will contain “The First Step” instead of other headings for other steps.

Demo

I want each heading to have a different title: “The First Step,” “The Second Step,” etc…

How do I go about doing that and what technology do I use? Can this be done in purely HTML and CSS or do I have to use Javascript/JQuery to achieve what I want?

Answer 1

Use nth-child() on the div element:

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

Demo: http://jsfiddle.net/bQBgL/4/