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;  //间隔数字为2
    counter-increment: num 1;  //间隔数字为1
    content: counter(num);
    position: absolute;
    top: 5px;
    left: -4px;
  }
}
</style>