4.CSSでクラスにスタイルを追加する

.contents-insert{
     padding: 0 0 0 2em;
     margin: 0;
}

.contents-insert  li{
     list-style-type: none;
     list-style-position: inside;
     counter-increment: num;
}

.contents-insert li:before{
     display: marker;
     content: "(" counter(num) ")";
}

• margin: 要素の外の余白です。ここでは上下左右とも0の設定なので、"contents-insert"はページ幅いっぱいに広がり、上下の要素との間の余白も0です。
• padding: 要素の中身が入る枠と実際の要素の中身との間の余白です。上、右、下は0なので余白なし、左側は2文字分の余白をつけインデントしています。
  
• list-style-type: リストの前に表示するマーカーを指定します。ここでは"none"として表示させない設定です。
• list-style-position: リストのマーカーの位置を指定します。"inside" でマーカーをリストの各項目内に表示します。
• counter-increment: カウンターの増え方を指定します。ここでは"num"というカウンターをつくり1ずつ増えていく設定です。数字を指定しなければ1ずつ増えていきます。
• :before:   要素の前に擬似要素をつくります。リストマーカーを非表示にしたのでここではリスト要素の前に擬似要素をつくり新しいマーカーを指定します。
• display: 要素の表示を指定します。"marker" でリストマーカーを表示するためのマーカーボックスをつくります。
• content: 要素の中身を置き換えます。ここでは  "(numで指定したカウンター)" という表示になるよう指定しています。