原生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>