css Vue尺子样式

原生css生成尺子样式
在这里插入图片描述

<template><div class="page"><div class="Light"></div><div class="rile"><ul id="list"><!--尺子需要几个单位就加几个--><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</template><script>
export default {name: 'temDiv',data() {return {};},mounted() {},methods: {},
};
</script><style lang="less" scoped>
.page {// 尺子的总宽度width: 800px;margin: 300px;.Light {height: 60px;width: 100%;display: flex;justify-content: center;background-color: #fff;}.rile {width: 100%;position: relative;}// 单位ul{position: absolute;left: 0;right: 0;list-style: none;//counter-reset: num -2;  // 由于间隔数字是2，减2则从0开始counter-reset: num -1;  // 由于间隔数字是1，减1则从0开始width: 100%;padding-inline-start: 0px;display: flex;justify-content: space-between;}#list>li {width: 1px;height: 6px;background-color: black;position: relative;}#list>li:before{//counter-increment: num 2;  //间隔数字为2counter-increment: num 1;  //间隔数字为1content: counter(num);position: absolute;top: 5px;left: -4px;}
}
</style>