CSS---序号使用css设置，counter-reset、counter-increment、content配合实现备注文案的序号展示

直接上代码，全代码copy即可使用!

<template><div class="reminder"><span class="Bold_12_body" style="line-height: 8vw">温馨提示：</span><br /><div class="rule-container"><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示123123提示提示提示提示提示提示提示提示23</div><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示3123123提示提示提示提示提示提示提示提示23</div><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示提12312示提示提示提示提示提示提示提示23</div></div></div>
</template><script setup></script>
<style lang="less" scoped>
.reminder {padding: 25px;
}
.rule-container {counter-reset: rule-counter; /* 重置计数器 */
}.rule {display: flex;justify-content: flex-start;
}.rule::before {counter-increment: rule-counter; /* 计数器递增 */content: counter(rule-counter) '. '; /* 设置序号内容 */margin-right: 0.5em; /* 序号与文字之间的间距 */
}.rule::after {content: attr(data-text); /* 设置文字内容 */display: block; /* 换行显示 */text-indent: 2em; /* 文字首行缩进 */
}
</style>

效果如下：其中注意如果是全数字的话，不会换行，需要自己修改使用哦！

上面属性可能存在兼容性，如果确定不会使用老版本浏览器就可以！