を参照してください

Question

純粋にHTML/CSSで注文リストのアイテム番号を参照する方法があるので、アイテム番号が更新されたときに更新されます。

ie。以下のリスト与えられたLog into your accountの数に自動更新以下の最初の段落、内数4を持っていることは、HTML順序付きリストである（<ol>）

If you already have a user account skip to step 4 
1. Create user Account 
2. Enter you personal information 
3. Click 'Create account' 
4. Log into your account 
5. Do account things... 

が手動で最初の段落を更新することなく、次のようになり

If you already have a user account skip to step 5 
1. Create user Account 
2. Select your account type 
3. Enter you personal information 
4. Click 'Create account' 
5. Log into your account 
6. Do account things... 

Answer 1

あなたはです。ちょうどCSSでやっていますが、それはsurprisingly good browser supportでハックな解決策をとります。

基本的には、アイデアは（クラスでマークされた）したいリスト項目に項目の数をカウントするCSS countersを使用することです：

<div class="numbered-stuff"> 
    <p> 
    If you want the important stuff, skip to step 
    </p> 
    <ol> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li>Stuff</li> 
    <li class="important">Important Stuff</li> 
    <li>Stuff</li> 
    </ol> 
</div> 

この場合、私たちは私たちの付いた5番目のアイテムを持っていますクラスの前にすべてのアイテムのカウンターを増やす必要があります。

ol { 
    counter-reset: stuff; 
} 

ol li { 
    counter-increment: stuff; 
} 

ol li.important:after{ 
    content:counter(stuff); 
} 

静かな、簡単？ここで、テキストの横にafter要素を配置するだけです。 （醜いUIさんは吸うので、スタイルを少しで）一緒にすべてを置く：もちろん

@import url('https://fonts.googleapis.com/css?family=Lato'); 
 
body, 
 
html { 
 
    margin: 0; 
 
    background: #efefef; 
 
} 
 
.numbered-stuff { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding-right: 25px; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 
p { 
 
    background: white; 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
ol { 
 
    counter-reset: stuff; 
 
} 
 
ol li { 
 
    counter-increment: stuff; 
 
} 
 
ol li.important:after { 
 
    content: counter(stuff); 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    padding: 10px; 
 
    color: white; 
 
    background: #009688; 
 
} 
 
}

<div class="numbered-stuff"> 
 
    <p> 
 
    If you want the important stuff, skip to step 
 
    </p> 
 
    <ol> 
 
    <li>Stuff</li> 
 
    <li>Stuff</li> 
 
    <li>Stuff</li> 
 
    <li>Stuff</li> 
 
    <li class="important">Important Stuff</li> 
 
    <li>Stuff</li> 
 
    </ol> 
 
</div>

を、あなたが望むどのようにHTMLを変更することができますが、考え方は同じ

まま