排序項目以小寫羅馬值/數值顯示

客製化: (1)含圓弧括號(2)各項次內容首字母對齊(3)排序項目靠左對齊

by cactus77kiki

HTML

<div class="tab-content-1">
<ol class="abc">
  <li>在確認期間內取得；</li>
  <li>以非正常商業條款和條件取得；</li>
  <li>未遵守貸款合約條款（例如未按時還款）；或</li>
  <li>貸款合約條款發生變更。</li>
</ol>


</div>
<h3>Test:</h3>
<h4>
羅馬數值型
</h4>
<div class="tab-content">
<ol class="RoundDisc RomaDisc">
  <li>在確認期間內取得；</li>
  <li>以非正常商業條款和條件取得；</li>
  <li>未遵守貸款合約條款（例如未按時還款）；或</li>
  <li>貸款合約條款發生變更。</li>
</ol>
<h4>
數值型
</h4>
<ol class="RoundDisc NumberDisc">
  <li>在確認期間內取得；</li>
  <li>以非正常商業條款和條件取得；</li>
  <li>未遵守貸款合約條款（例如未按時還款）；或</li>
  <li>貸款合約條款發生變更。</li>
</ol>

</div>

CSS

.tab-content ol.RoundDisc {
        counter-reset: list;
        margin: 0;
    }

    .tab-content ol.RoundDisc > li {
        list-style: none;
        position: relative;
    }

    .tab-content ol.RomaDisc > li:before {
        counter-increment: list;
        content: "(" counter(list, lower-roman) ")   ";
        position: absolute;
        left: -1.8em;
    }
    
        .tab-content ol.NumberDisc > li:before {
        counter-increment: list;
        content: "(" counter(list) ")   ";
        position: absolute;
        left: -1.8em;
    }

JavaScript

/*
以'該篇"DisgruntledGoat"的最尾回應code下去調整
ref: https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses
*/