1

タグを使用して<hr>、Webサイトの一部にさまざまな見出しをスタイル設定して含めようとしています。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

このデモを確認してください：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 に答える
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"; }​

等...

于 2012-11-16T16:09:39.307 に答える