css有序列表 中文序号解决方法

这个问题百度了很久 看到百度的富文本编辑器用的是图片解决 得到了个解决办法是用图片设置list-style解决 但是由于图片收到像素等限制会不清晰 所以想到使用伪类解决

css代码

 ol {
     list-style: none;
 }
 .list-cn-paddingleft-1{
     padding-left: 35px;
     position: relative;
 }
 li.list-cn-1-1::before {
     position: absolute;
     left: 0;
     content: '一、';
 }
 
 li.list-cn-1-2::before {
     position: absolute;
     left: 0;
     content: '二、';
 }
 
 li.list-cn-1-3::before {
     position: absolute;
     left: 0;
     content: '三、';
 }
 
 li.list-cn-1-4::before {
     position: absolute;
     left: 0;
     content: '四、';
 }
 
 li.list-cn-1-5::before {
     position: absolute;
     left: 0;
     content: '五、';
 }
 
 li.list-cn-1-6::before {
     position: absolute;
     left: 0;
     content: '六、';
 }
 
 li.list-cn-1-7::before {
     position: absolute;
     left: 0;
     content: '七、';
 }
 
 li.list-cn-1-8::before {
     position: absolute;
     left: 0;
     content: '八、';
 }
 
 li.list-cn-1-9::before {
     position: absolute;
     left: 0;
     content: '九、';
 }

HTML``

                                <ol>
                                    <li class="list-cn-1-1 list-cn-paddingleft-1">
                                        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
                                    </li>
                                    <li class="list-cn-1-2 list-cn-paddingleft-1">>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </li>

                                    <li class="list-cn-1-3 list-cn-paddingleft-1">>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </li>

                                </ol>