sample: indent with dl-dt-dd

HTML

<dl>
  <dt>中国には</dt>
  <dd>
    <dl>
      <dt>市があります</dt>
      <dd>例、北京市</dd>
      
      <dt>省があります</dt>
      <dd>例、黒竜江省（黒龍江省）</dd>
      
      <dt>自治区があります</dt>
      <dd>例、寧夏回族自治区</dd
  </dd>
  
  <dt>日本には</dt>
  <dd>
    <dl>
      <dt>市があります</dt>
      <dd>例、札幌市、横浜市</dd>

      <dt>県があります</dt>
      <dd>例、秋田県、滋賀県、和歌山県、山口県</dd>

      <dt>特別区があります</dt>
      <dd>例、千代田区、墨田区、港区</dd>
    </dl>
  </dd>
</dl>

CSS

body > dl > dd > dl {
  counter-reset: num;
}

dd {
  margin-left: 1em;
}

dl > dd > dl > dt:before {
  counter-increment: num;
  content: counter(num);
  
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 0.9em;
}

JavaScript

`{

}`